Ignite UI for Angular 19.2

Grid Row Drag allows users to drag a Row and pass the data of a grid record on to another surface, which has been configured to process/render this data in a particular way. This is a very useful feature in case when we want to move the row data by dragging between two grids. For more details on the feature visit the WIKI pages on Github or the sample on the Infragistics website.

Angular Drag and Drop Enhancements

igxDrag and igxDrop enhancements - Now it is possible to drag the base element igxDrag when it is instanced by setting the new input ghost to false. The drag animation improvement is also enhanced. Three new drop strategies have been provided - Append, Prepend and Insert. We have added an input dropStrategy to the igxDrop which specify the strategy used for dropping an element inside the drop area. Custom ones can be specified as well.

Treemap

Treemaps display hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node’s rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data.

Clipboard Copy Operations

This functionality provides a fast, easy and customizable way to copy Grid data into Excel or other external programs.

Advanced Filtering

In the advanced filtering dialog, you could create groups of conditions across all grid columns. The advanced filtering button is shown in the grid's toolbar when allowAdvancedFiltering and showToolbar properties are set to true. You could also open/close the advanced filtering dialog using the openAdvancedFilteringDialog and closeAdvancedFilteringDialog methods.

New Theme Based on Fluent Design

We now have a new theme that mimics Microsoft "Fluent" design system. Depending on your use case you can use one of the following mixins: igx-fluent-theme and igx-fluent-dark-theme.

Multi-View Calendar

By using the monthsViewNumber input you can now manage the displayed months in the calendar. It also supports all three types of selection, keyboard navigation and allows you hide the days which are not part of the month by using the hideOutsideDays input.

Data Visualization

IgxSparkline

The Ignite UI for Angular Sparkline component is a lightweight charting control. It is intended for rendering within a small scale layout such as within a grid cell, but can also be rendered alone. We have added Sparkline in all Primary Grids -  Business Propeller Grid, Data Grid, Tree Data Grid and Hierarchical Data Grid:

We’ve been also working on the Ignite UI CLI documentation. It now includes many new topics that will help you gain a better understanding of how to easily scaffold Angular applications and use pre-configured templates to help you get your next app off the ground in no time using our Ignite UI CLI. Check out this:

IgxBottomNav - now supports an igx-tab declaration mode. Despite the fact that the primary usage of the component is to define panels with content, there may be cases in which you may need to define tab items only. You can use the new mode to apply directives on the tab item, e.g. to achieve routing navigation. You are also allowed to customize tab items with labels, icons, and even templates.

IgxTabs - now supports an igx-tab-item declaration mode as well. When defining tab items you have the ability to apply directives on them. For example, you may use this functionality to achieve navigation between views using the Angular Router.

IgxCombo - Input [overlaySettings] allows an object of type OverlaySettings to be passed. These custom overlay settings control how the drop-down list displays.

IgxForOf - now offers usage of local variables even, odd, first and last to help with the distinction of the currently iterated element.

IgxSlider - has lot of visual enhancements and we’ve implemented adding of custom labels.

Enhanced Selection functionality of the Grids - Introduced new properties cellSelection and rowSelection which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also hideRowSelectors property is added, which allows you to show and hide row selectors when row selection is enabled. 

Custom template for row selectors - Introduced functionality for templating row and header selectors 

IgxCombo - Combo selection is now consistent when valueKey is defined. When valueKey is specified, selection is based on the value keys of the items 

igxExcelStyleLoading - Directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead. 

FilterStrategy - Input that allows you to override the default filtering strategy 

uniqueColumnValuesStrategy - Input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid). 

IgxHierarchicalGrid Row Islands - now emit child grid events with an additional argument - owner, which holds reference to the related child grid component instance 

IgxCheckbox - introduced a new read only property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding. 

IgxOverlay - introduced a new ContainerPositionStrategy. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings. 

---

Enough with the new components and features. What about documentation and understanding how to use everything new? We strive to deliver simple and effortless experiences, and we believe that begins with listening to our customers and providing meaningful content. This is why, with this release, we spent more time writing documentation than working on actual feature development. Here is why:

Server-side Rendering with Angular Universal - This blog is describing what Server-side Rendering is and how to configure it within Ignite UI for Angular application.

Editing entities without breaking the network tab Series (5/5) - Series for implementing batch editing with the Ignite UI for Angular Grid control and Web API.

Styling sections in topics – we thought about “how can we give visual guidance on what the styling looks like for a control or particular feature“ and “how can we get more code snippets and API docs references”. We aim to give a real way to know what styles are related to a feature and how to implement them.

WPF to Web guidance - This guide aims to help Desktop developers to convert their skills into Web application skills. If you are a WPF developer, this guide will help you to learn Angular by comparing the differences and similarities between the two platforms. It covers topics like application structure, components, data binding and much more.

New igxTransaction topics  We are already using igxTransaction in our grid components (see grid, tree grid and hierarchical editing batch editing topics). But if you want to understand how to use igxTransaction on your own, you can follow our guidance.

More topic for CLI - We have added some more guidance for our Ignite UI CLI tool and especially how to generate our Ignite UI Angular components using it.

---

Angular Connect London 2019

The year so far has been filled with opportunities and positive experiences, such as the Angular Connect conference that we attended. It was a great conference, bringing together a large group of software developers and industry leaders all sharing a common interest: the present state and the future of Angular web development. As a premium sponsor at the event, Infragistics had the opportunity to connect with not only the delegates of the event but with the wider Angular community. Also having one-on-one chats about what they are working on and how we at Infragistics can help them overcome complex problems with our Ignite UI for Angular product. 

Find out more about the Angular Connect Conference at our Medium post here.

---

Get Sneak Peeks and Give Input on Feature Requests

One milestone is down and we are after the next one. We have decided to offer you a sneak peek on what is "cooking" in IgniteUI for Angular Sprints through the GitHub Projects. Now you can follow the progress of your issues and be part of the process as you comment, report or request features on GitHub. Do not miss the opportunity to strike while the iron is hot!

---

Follow us on Medium and stay up to date with the latest Angular related perks that we work on, give us a star on GitHub and help us to continue improving our product by addressing any concerns, questions or feature requests in the issues section. We will give our best to constantly improve our product experience to suits all your needs and build apps with ease.