Ignite UI for Angular 16.0.0: See The Exciting Improvements

We are all excited about the new Angular v16 release! We are eager to put our hands on the standalone APIs and take advantage of improved reactivity, server-side rendering, and tooling. At Infragistics, we strive to provide you with the best possible user experience and keep you updated about the latest versions of frameworks, platforms, and technology. That is why we are excited to share what we have included in the Ignite UI for Angular 16.0.0 release, with full support for Angular v16.

All That's New In Ignite UI for Angular 16.0.0

  Using Standalone Components with Ignite UI for Angular - Preview Release

One of the biggest differences is that Angular v16 introduces the concept of standalone components. This allows for a simplified way of building applications by reducing the need for using NgModules.

 Tooltip for the full subtitle/title on hover for the Expansion panel

The Complete Ignite UI for Angular Change Log for 16.0.0

General

• All Ignite UI for Angular components are now exported as standalone components. The library still exports NgModules, which have been preserved for backward compatibility, but they no longer declare any of the Ignite UI for Angular components. Instead, they just import and export the standalone components. Bare in mind that the standalone components are still in a preview stage. Some utility directive exports may change in the future and may be missing from the documentation in the initial release, hence the preview state of the feature.

  Now you can do:

  // IGX_GRID_DIRECTIVES exports all grid related components and directives
  import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
  
  @Component({
      selector: 'app-grid-sample',
      styleUrls: ['grid.sample.scss'],
      templateUrl: 'grid.sample.html',
      standalone: true,
      imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
  })

  or

  // Single import of only the <igx-grid> component.
  import { IgxGridComponent } from 'igniteui-angular';
  
  @Component({
      selector: 'app-grid-sample',
      styleUrls: ['grid.sample.scss'],
      templateUrl: 'grid.sample.html',
      standalone: true,
      imports: [IgxGridComponent, AsyncPipe]
  })

  or still

  // `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
  import { IgxGridModule } from 'igniteui-angular';
  
  @Component({
      selector: 'app-grid-sample',
      styleUrls: ['grid.sample.scss'],
      templateUrl: 'grid.sample.html',
      standalone: true,
      imports: [IgxGridModule, AsyncPipe]
  })

• IgxChip

  • Behavioral Change: The igxChip styles have been revisited and the select container animation has been removed when selecting/deselecting a chip.
  • Behavioral Change: The remove button behavior has been revisited. Now when the chip is in a disabled state, the remove button is hidden.

• IgxGrid, IgxHierarchicalGrid

  • Breaking Change: The IgxHeaderExpandIndicatorDirective and IgxHeaderCollapseIndicatorDirective directives, as well as the headerExpandIndicatorTemplate and headerCollapseIndicatorTemplate properties have been renamed to IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, headerExpandedIndicatorTemplate, and headerCollapsedIndicatorTemplate respectively to properly reflect their purpose. Automatic migrations are available and will be applied on ng update.

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  Breaking Changes: The following grid properties, deprecated since version 12.1.0, are now removed:

  • evenRowCSS;
  • oddRowCSS;
  • page;
  • paging;
  • perPage;
  • totalPages;
  • isFirstPage;
  • isLastPage;

  Also the following deprecated grid events are removed.

  • pageChange;
  • perPageChange;
  • pagingDone;

  Deprecated methods removed from the grid API are:

  • nextPage;
  • previousPage;
  • paginate;
  • getCellByColumnVisibleIndex;

New Features

• IgxChip
  • New input variant which can take any of the following values: 'primary', 'info', 'success', 'warning', 'danger'
• IgxExpansionPanel:
  • IgxExpansionPanelTitleDirective and IgxExpansionPanelDescriptionDirective show tooltip of the provided text content.
• IgxDateRangePicker
  • Added showWeekNumbers input that toggles whether or not the number of a week will be visible next to it
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCount can now also be bound as Input in remote virtualization scenarios.
  • rowExpandedIndicatorTemplate, rowCollapsedIndicatorTemplate, headerExpandedIndicatorTemplate, headerCollapsedIndicatorTemplate can now also be bound as Input to provide templates for the row and header expand/collapse indicators respectively. This is in addition to the existing equivalent template directives to allow reuse.
• IgxPivotGrid
  • Added pivotConfigurationChanged event triggered any time any of the pivotConfiguration properties are changed via the UI.
• ISortingExpression now accepts an optional generic type parameter for type narrowing of the fieldName property to keys of the data item, e.g. ISortingExpression<MyDataItem>
• Util
  • Added new CachedDataCloneStrategy that allows for cloning object with circular references.

Wrap-Up

We continue to ship new features, improve performance, and provide stability improvements continuously. Committed to providing you with the best Angular UI toolkit and related insights, our goal is 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 the design-to-code process by mapping Sketch or Adobe XD design files to real UI components and creating production-ready code. This way, you can generate Angular, Blazor, or Web Components applications faster than ever. Some of the enhancements are thanks to the requests from users like yourself through our GitHub repository. With this in mind, we are always open to suggestions and feedback – it makes us grow and better serve your development needs. Lastly, we know that transparency and visibility of our next goals are also fundamental. That's why we keep the roadmap always up to date!

In Addition

Follow us on Medium to stay up-to-date and learn about the latest Angular-related projects we are working on. Give us a star on GitHub and help us continue improving our product by addressing any concerns, questions, or feature requests in the issues section. We will continue to do our best to constantly improve the product experience to meet all your needs and build apps with ease.