Ignite UI for Angular 12.2.0 Release

It has been a busy time here at Infragistics, with a number of Ignite UI updates and new releases coming in the past few weeks. After the September releases of the Indigo.Design App Builder and Web Components Dock Manager, now we are proud to announce the release of Ignite UI for Angular 12.2.0!

 First I want to share a glimpse of the new styling abilities of the Infragisitcs Web Dock Manager. If you like what you see, you can find more at Web Components Dock Manager.

Let's review what we have for you in Ignite UI for Angular 12.2.0.

Angular Grids: Grid, Tree Grid and Hierarchical Grid

 Angular grid row styling

 The Angular Grid component in Ignite UI for Angular provides conditional styling of rows based on custom rules.

 Add row at the top of the grid

 Ignite UI Angular Grid allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported.

 Persistent State directive - column group storing

 Now, the Angular Grid State Persistence directive supports out of the box: 

• Multi column headers
• Columns order
• Column properties defined by the IColumnState interface
• Columns templates and functions are restored using application level code

 IgxTreeGrid: new filtering strategy to display only filtered records

 By default, after a filtering is applied, the Tree Grid component displays the records matching the criterion that have been set and their parents in a grayed-out fashion to provide additional context. However, in some cases, you may want to display only the records matching particular filtering condition without any trace for their parents. This can be achieved out of the box.

 Update of Grid Export to Excel Service - export of freeze columns and rows

By default Excel Exporter service exports the grid with scrollable (unfrozen) column headers. There are scenarios in which you may want to freeze all headers on top of the exported excel file so they always stay in view as the user scrolls through the records. To achieve this you could set the exporter option freezeHeaders to true.

Angular Components

 Snackbar - support of animation customization

Ignite UI Snackbar component can be customized to display more complex elements than a message and a button. If we want to show the snackbar while loading a file, for example, a loading animation could be added to its content.

 Toast - new position strategy

Here is the complete Ignite UI for Angular Change Log for 12.2.0

12.2.0

New Features

• igxGrid, igxHierarchicalGrid, igxTreeGrid

  • Added capability to restore the state of multi column headers with IgxGridStateDirective.

  • Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row

  • Introduced two new cancellable outputs related to CRUD - rowDelete and rowAdd. Both use an IGridEditEventArgs object as an event argument.

    <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>

  • Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for IgxTreeGrid. Please, refer to the official documentation for more information: Grid Row Adding and Tree Grid Row Adding.

    Note: That the new record is still added at the end of the data view, after the end-user submits it.

    this.grid.beginAddRowById('ALFKI');             // spawns the add row UI under the row with PK 'ALFKI'
    this.grid.beginAddRowById(null);                // spawns the add row UI as the first record
    this.grid.beginAddRowByIndex(10);               // spawns the add row UI at index 10
    this.grid.beginAddRowByIndex(0);                // spawns the add row UI as the first record
    this.treeGrid.beginAddRowById('ALFKI', true);   // spawns the add row UI to add a child for the row with PK 'ALFKI'
    this.treeGrid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 10
    this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record

  • Added headerStyles and headerGroupStyles inputs to the column component. Similar to cellStyles is exposes a way to bind CSS properties and style the grid headers.

• igxTreeGrid
  • Added TreeGridMatchingRecordsOnlyFilteringStrategy, which allows you to display only the records matching particular filtering condition without any trace for their parents.
• IgxSnackbarComponent
  • Introduced new 'positionSettings' input which allows to define a custom animation and position.
• IgxToastComponent
  • Introduced new 'positionSettings' input which allows to define a custom animation and position.

General

• igxGrid, igxHierarchicalGrid, igxTreeGrid

  • 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
  • The column formatter callback signature now accepts the row data as an additional argument:

    formatter(value: any, rowData?: any)

    The rowData argument may be undefined in remote scenarios/applying the callback on filtering labels so make sure to check its availability.

• IgxForOf - now takes margins into account when calculating the space that each element takes.

  Note: If your virtualized items contain margins, please calculate them into the itemSize value for the best possible initial virtualized state.

• IgxExcelExporterService

  • Added support for freezing column headers in Excel. By default, the column headers would not be frozen but this behavior can be controlled by the freezeHeaders option of the IgxExcelExporterOptions object.

Wrap-Up

As you can see, there are numerous updates to Ignite UI for Angular, ready for you to use. We are committed to providing you with the best Angular UI toolkit and continuously updating our components, grids, and features so they remain the fastest on the market. 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.

---

---

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.