Log in to like this post! Ignite UI for Angular 13.1.0 Release Radoslav Mirchev / Wednesday, March 2, 2022 It is time for our first major release in 2022, Ignite UI for Angular 13.1.0, 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. Keep in mind that Angular 13.1 builds on a slew of new components and features we added throughout 2021 in Ignite UI for Angular 12.1, 12.2 and 13.0, including the Paginator and Accordion components, and features such as: Conditional Row Styling Across All Grids Updated Styling Capabilities in Dock Manager Add New Row at the Top of the Grid(s) Multi-column Headers and Frozen Column Row in Export-to-Excel service Grouping Pipe and Group Area for Angular Tree Grid Localization for 19 new languages Angular Stepper Component Angular Single Selection Combo Component Indigo.Design Design System "We at Infragistics are also strong believers in the value of a design system. It changes the way companies innovate and speeds up the pace of app creation. We would also like to add that design systems are evolving and they are an investment that pays off in the future." — Stefan Ivanov, Manager UX in Product Development, Infragistics. I couldn't say it better so I highly recommend to take a look at the "6 Steps for Building a Great Design System" blog. If you want to find more about Indigo.Design, you can visit the documentation page and dive deep in the realm of Design Systems. Cloud-Based WYSIWYG IDE + Angular If you are eager to start building your Angular applications with these new components and with the only cloud-based, drag-and-drop WYSIWYG IDE, App Builder, you can check the App Builder roadmap and see when they will be available in its toolbox. New with Ignite UI for Angular 13 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. Here is the complete Ignite UI for Angular Change Log for 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 design files 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.