Log in to like this post! Ignite UI for Angular 22.1 Release - Updates and What's New Radoslav Mirchev / Wednesday, June 15, 2022 It is time for our first major release in 2022, Ignite UI for Angular 22.1,and it includes one of the most powerful controls used to organize and slice and dice business data — the Angular Pivot Grid! The Angular Pivot Grid tremendously increases your application capabilities to summarize huge amounts of data in a cross-table format that further can be sorted, grouped or filtered. The table layout could be easily customized by simple drag-and-drop operations, depending on the user needs. Ignite UI for Angular 22.1 includes all new components and features we added throughout 2022 in Ignite UI for Angular 13.1, 13.2 and 14.0, and support for Angular 14. Yes, that is correct, Angular 14 has been released on 2nd of June and we are already supporting it! New with Ignite UI for Angular 22.1 Angular Pivot Grid The Angular Pivot Grid Component displays data in a pivot table that helps perform complex analysis on the supplied data set. You can use the IgxPivotGridComponent to configure and display your data in a multi-dimensional pivot table structure. The rows and columns represent distinct data groups, and the data cell values represent aggregations. This allows complex data analysis based on a simple flat data set. The IgxPivotGridComponent is a feature-rich pivot table that provides easy configuration of the different dimensions and values as well as additional data operations on them like filtering and sorting. It can be used as a stand-alone component as well as in combination with the Angular Pivot Data Selector Component for more flexible runtime configuration options. Angular Pivot Grid Features To make your work easier, we enable frictionless upgrading of new features and components in Ignite UI for Angular. This holds true in this newest release and is why the pivot and flat grid component classes in Ignite UI for Angular inherit from a common base and thus share functionality, features and keyboard navigation. However, the pivot grid nature implies some unique features that are not shared with the Ignite UI for Angular Grid: Dimensions filtering Dimensions sorting Dimensions resizing Dimensions selection Super Compact Mode Additional summary column Dimensions drag & drop Angular Pivot Grid Remote Operations There are scenarios where the pivot data is already grouped and aggregated from a remote service and there's no need for further processing on the client side, the pivot grid can be configured to use a custom empty strategy that will skip data processing on the client and allow it to directly display the data as is. Angular Tree Grid - Excel Style Filter: Tree Filter View By default, the Excel Style Filtering dialog displays the items in a list view. In some business use cases you can take advantage of cascade selection and have all children selected by default. In order to display them in a tree view you can use the TreeGridFilteringStrategy and specify an array of column field names. Filter items will be displayed in a tree view for the speicified columns and in a list view for all other columns. The following sample demonstrates how to show filter items in a tree view for the first column. RTL support for Tabs Component Angular Grid Summary custom templating Now with Summary Custom Templating you are able to customize height, size, color, font and styles of igxSummary according your clients needs. New Angular Data Grid Sorting option - single and multiple New sortingOption property has been introduced on grid level. This property allows you to set either single or multiple sorting mode. When single mode is enabled you can sort one column at a time. The default value of the property is multiple. Sorting and grouping expressions are now working separately. If grouping and sorting expressions are in a conflict, grouping expressions take precedence. You can read more about that in our official documentation. Support for double value binding in Angular Slider component The Ignite UI for Angular Slider is a form component which allows selection in a given range by moving a thumb along a track. The track can be defined as continuous or stepped and the slider can be configured so users can choose between single value and range (lower and upper value) slider types. Angular Drag and Drop update We have added support for window scroll when dragging element to its edges for the Angular Drag and Drop. The new scrollContainer property that can specify specific element that should be scrolled instead of window for custom solutions. Here is the complete Ignite UI for Angular Change Log for 13.1.0, 13.2.0 and 14.0.0 14.0.0 General Updating dependency to Angular 14 Migrations Migrations now support Yarn berry (version 2+) IgxGridEditingActions Added new inputs to show/hide the edit and delete buttons - editRow, deleteRow. 13.2.0 General IgxPivotGrid Breaking Change - Changing the IPivotValue's formatter and styles functions optional parameters, example: formatter?: (value: any, rowData?: IPivotGridRecord, columnData?: IPivotGridColumn) => any; First optional parameter rowData is now of type IPivotGridRecord and contains more contextual information on the dimension and aggregation values. Previously it contained just the aggregation data object. Old usage can be updated as follows, from: formatter: (value: any, rowData: any) => rowData['someField']; to: formatter: (value: any, rowData: IPivotGridRecord) => rowData.aggregationValues.get('someField'); Also an additional optional columnData parameter can be added, which contains information on the column dimensions. IgxExpansionPanel Changed the expansion panel layout, adding padding to the header and content elements. New palette A new fluent light and dark palettes that use the default fluent colors - $light-fluent-palette and $dark-fluent-palette. New Features IgxGrid, IgxTreeGrid, IgxHierarchicalGrid new sortingOption property has been introduced on grid level; This property allows you to set either single or multiple sorting mode; When single mode is enabled you can sort one column at a time; The default value of the property is multiple; Behavioral Change - sorting and grouping expressions are now working separately; If grouping/sorting expressions are in a conflict, grouping expressions take precedence. You can read more about that in our official documentation. IgxSlider support for double value binding in slider of type RANGE through newly exposed lowerValue and upperValue IgxDrag Behavioral Change - support for window scroll when dragging element to its edges new scrollContainer property that can specify specific element that should be scrolled instead of window for custom solutions. 13.1.0 New Features Added IgxPivotGrid component(Preview) The igxPivotGrid is a data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data. Main purpose is to transform and display a flat array of data into a complex grouped structure with aggregated values based on the main 3 dimensions: rows, columns and values, which the user may specify depending on his/her business needs. The whole pivot grid configuration is set through IPivotConfiguration interface. <igx-pivot-grid [data]="origData" [pivotConfiguration]="pivotConfigHierarchy"> </igx-pivot-grid> For more information, check out the README, specification and official documentation. IgxTreeGrid Added support for tree filter items in the Excel Style filtering UI. Use the TreeGridFilteringStrategy constructor to specify which columns should display tree filter items. igxTooltipTarget directive now allows specifying a plain text tooltip without adding an additional DOM element decorated with the igxTooltip directive. This is achieved via the newly introduced tooltip string input. <button igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'"> info </button> IgxTabs have full right-to-left (RTL) support. IgxExcelExporterService Added support for exporting the grids' headers by default when the data is empty. This behavior can be controlled by the alwaysExportHeaders option of the IgxExcelExporterOptions object. General IgxGrid, IgxTreeGrid, IgxHierarchicalGrid Breaking Change - movable property of IgxColumnComponent is now deprecated and will be removed in future version. Instead, use the newly exposed moving property on grid-level: <igx-grid [data]="data" [moving]="true"> <igx-column field="Name"></igx-column> <igx-column field="Age"></igx-column> </igx-grid> Breaking Change - getFilterItems method is added to the IFilteringStrategy interface. Using the new method you could retrieve either list or tree filter items to be displayed for a column in the Excel Style filtering UI. If you have your own implementation of the IFilteringStrategy interface, you will need to implement the new method. Otherwise, you could derive from the BaseFilteringStrategy class or any of its sub-classes, which already implement the new method. Exposed dataChanging and dataChanged events for the three grids that are re-emits of the corresponding IgxForOf events. These indicate the beginning and end of the input change triggering the actual data re-rendering which happens each time the data view changes. This happens after changes in either the data the grid is bound or the state affecting the operations which alter this data (e.g. sorting, filtering, group-by). Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls. IgxToast Breaking Changes - The toast deprecated position property have been removed. We suggest using positionSettings property instead. 13.0.5 New Features IgxGrid, IgxTreeGrid, IgxHierarchicalGrid Added dataCloneStrategy input, which allows users provide their own implementation of how data objects are cloned when row and/or batch editing is enabled. The custom strategy should implement the IDataCloneStrategy interface. 13.0.1 New Features Add igxSummary directive in order to re-template the default summary cell layout. Expose summaryTemplate input in order to bind the column summary template through API. Expose summaryRowHeight property which overrides the default hight of the summary row. Code example below: <igx-column ... [hasSummary]="true"> <ng-template igxSummary let-summaryResult> <span> My custom summary template</span> <span>{{ summaryResult[0].label }} - {{ summaryResult[0].summaryResult }}</span> </ng-template> </igx-column> Please, refer to the Summaries topic for more information. Wrap-Up We continue to ship new features on a continuous schedule, to improve performance, and to provide stability improvements as we are committed to providing you with the best Angular UI toolkit and related insights to empower you with more know-how. Apart from the newest Pivot Grid that is so crucial, we know that other components like the Angular Data Grid are also super critical. That's why we published a helpful Angular UI Data Grid tutorial to help you learn how to create a full-featured Angular UI Grid from scratch. Go on and watch it. We also continue to develop the best cloud-based, low-code app builder platform — App Builder —that accelerates app building by mapping Sketch or Adobe XD designs to real UI components and creating production-ready code. So you can generate Angular or Blazor applications faster than ever. As we mentioned, some of our enhancements come from users like yourself through our GitHub repository. With this in mind, we are always open to suggestions and feedback – it’s what makes us grow and serve you better. Last but not least we know that predictability and visibility on our next goals is critical for you, our business partners, so we have our roadmap always up to date! Follow us on Medium and stay up-to-date with the latest Angular-related projects that we are working on. Give us a star on GitHub and help us to continue to improve our product by addressing any concerns, questions or feature requests in the issues section. We will continue to do our best to constantly improve our product experience to meet all your needs and build apps with ease.