What's New in Ignite UI for Angular 22.1

TL;DR: Ignite UI for Angular 22.1 shipped on August 26, 2026, and it is a deliberate engineering-hygiene release for the Angular framework product. The five most significant changes are full zoneless support (the library no longer depends on NgZone for change detection), tree-shakable scoped component styles that make the pre-built themes roughly half the size, strict TypeScript typings, removal of the hammerjs peer dependency, and the tokens() mixin becoming the single way to apply a component theme. Existing Zone.js applications keep working with no behavioral change, and the tradeoff is a bounded migration cost in theming and the divider API in exchange for smaller bundles and forward compatibility with Angular’s zoneless future.

Ignite UI for Angular is a UI component library by Infragistics with 100+ components for Angular applications, including a high-performance data grid and charting. My thesis for 22.1 is simple: this release spends its budget on platform alignment rather than new components. Zoneless support, strict typing, dependency removal, and style scoping are the kind of investments that do not screenshot well but pay off in bundle size, type safety, and staying in step with the Angular framework. This post covers the six shipped changes, the migration work each one implies, and how to move an existing app forward.

Full Zoneless Support in Ignite UI for Angular 22.1

Ignite UI for Angular 22.1 no longer depends on NgZone for change detection, so applications can run zoneless or keep using Zone.js with no behavioral differences. This matters because Angular 21 made zoneless the default for new projects (provideZonelessChangeDetection() graduated to stable in Angular 20.2, and Angular 21 simply removed it from the boilerplate), and a component library that still required Zone.js would have blocked its consumers from dropping the dependency.

Zone.js worked by monkey-patching browser async APIs so Angular could re-check the component tree after anything asynchronous happened. Dropping it removes about 33 KB raw (roughly 10 KB gzipped) from the bundle and makes rendering causes explicit through signals and the standard notification APIs. A library that hosts user components cannot always use OnPush, so the work here was ensuring every Ignite UI for Angular component notifies Angular correctly without relying on Zone.js to trigger a global check.

Here is a zoneless bootstrap with Ignite UI for Angular. It combines Angular’s provideZonelessChangeDetection() with the providers the Ignite UI for Angular setup guidance requires:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideIgniteIntl } from 'igniteui-angular/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(), // zoneless change detection
    provideAnimations(),              // required for overlay and animated components
    provideIgniteIntl(),             // recommended localization for pickers, grids, etc.
  ],
}).catch((err) => console.error(err));

After adding the provider, remove zone.js and zone.js/testing from the polyfills array in angular.json (build and test targets) and uninstall the package with npm uninstall zone.js, as documented in Angular’s official zoneless guide. Limitation: this is an opt-in. If you do nothing, your existing Zone.js application continues to run exactly as before, because Ignite UI for Angular 22.1 behaves identically in both modes.

Scoped, Tree-Shakable Component Styles in Ignite UI for Angular 22.1

The Ignite UI for Angular library now ships structural styles inside each component’s own bundle instead of a single global stylesheet, which makes the pre-built themes roughly half the size. This is the change most likely to shrink a real application’s CSS payload without any code change beyond the upgrade.

Here is the problem it solves, and why the single global stylesheet had to die. Every application that imported the pre-built theme paid the style cost of every component in the library, including the ones it never used. This was a long-standing complaint: the original request that drove this work noted that when a user does not take advantage of all components, they still get all the styles for them. Teams worked around it by hand-authoring a Sass build with an $exclude list, which reduced the styles substantially but required knowing and maintaining the full component list. In 22.1 the structural styles travel with each component, so unused components no longer contribute their styles to the bundle. The 22.1.0 changelog puts the resulting reduction in the pre-built theme files at roughly 49% smaller raw and roughly 58% smaller gzipped. Design tokens for all four design systems (Material, Bootstrap, Fluent, Indigo) across light and dark are now emitted once per theme into the global preset rather than repeated.

Limitation: this only affects the structural styles that ship with components. Your color palette, typography, and any custom component themes are still generated the way you configure them, so the savings are largest for apps that used a small slice of the library through the global CSS.

Strict TypeScript Typings in Ignite UI for Angular 22.1

Ignite UI for Angular 22.1 is built with strict: true and strictTemplates: true, so the shipped typings are more accurate. For consumers this means the type definitions that ship in the package more faithfully describe the real component APIs, and mismatches surface at build time rather than at runtime.

strictTemplates verifies that component and directive bindings are assignable to their inputs, checks embedded views such as those inside control flow blocks, types context variables, and validates event objects. Building the whole library under strict mode forces those guarantees through every public type. In practice, applications that already run strict mode get typings that line up with their own settings, and applications that do not still benefit from more precise input and output types and better editor autocompletion.

// tsconfig.json (application side, recommended to match the library)
{
  "compilerOptions": {
    "strict": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

Limitation: stricter typings can surface latent type errors in application code that previously compiled against looser definitions. Those are real issues to fix, but they can add work to an upgrade, so budget time for a type pass on large codebases.

Native Pointer and Touch Events Replace the hammerjs Peer Dependency in Ignite UI for Angular 22.1

Ignite UI for Angular 22.1 removes the hammerjs peer dependency, and all touch gesture support is now implemented with native Pointer and Touch Events. Consumers can delete hammerjs from package.json, and the gesture behavior in components such as Slider, Drag and Drop, Carousel swipe, and Navigation Drawer is preserved through the browser’s own input APIs.

There is a security and maintenance argument here worth stating plainly. hammerjs’s last release, v2.0.8, was published roughly ten years ago (2015), and Snyk flags it as possibly discontinued, noting “it hasn’t seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project” — yet it still draws well over a million npm downloads a week, which is exactly the kind of stale-but-ubiquitous dependency that surfaces in security audits. Angular itself deprecated the HammerJS integration back in Angular 20 (the API docs state plainly, “The hammer integration is deprecated. Replace it by your own implementation.”), and HammerModule, previously exported from @angular/platform-browser, is no longer available in Angular 22. An unmaintained transitive dependency shows up in every consumer’s dependency review, and it is the kind of liability that is invisible until an auditor flags it. Native Pointer Events cover the same gestures hammerjs recognized, including pan, swipe, and pinch, without a third-party library. Removing it takes a line out of everyone’s lockfile and one recurring item out of everyone’s audit.

Limitation: if your own application code (not Ignite UI for Angular) still uses hammerjs gestures directly in templates, you must keep hammerjs and wire it up yourself, because Angular no longer provides the gesture plugin. Removing hammerjs is safe only when nothing outside the library depends on it.

IgxDividerComponent Replaces IgxDividerDirective in Ignite UI for Angular 22.1

Ignite UI for Angular 22.1 replaces IgxDividerDirective with IgxDividerComponent. The element selector is unchanged: you still write <igx-divider> in templates, so markup does not change. What changes is the exported class name you import in TypeScript.

The divider moved from a directive to a proper component to align it with how the rest of the library is authored and styled, which matters more now that structural styles ship per component. The ng update migration for 22.1 handles the rename automatically, rewriting IgxDividerDirective references to IgxDividerComponent in your imports.

// Before
import { IgxDividerDirective } from 'igniteui-angular/directives';

// After (ng update applies this automatically)
import { IgxDividerComponent } from 'igniteui-angular/directives';

Limitation: if you referenced IgxDividerDirective by type in your own code (for example, in a ViewChild query or a typed property) and you skip the automated migration, those references will not compile until you update the class name.

The tokens() Mixin Is the Single Way to Apply a Component Theme in Ignite UI for Angular 22.1

Ignite UI for Angular 22.1 makes the tokens() mixin the single way to apply a component theme, replacing the per-component wrapper and typography mixins across the rest of the library. Previously you applied a component theme by calling that component’s own wrapper mixin, which emitted a block of CSS rules. Now you generate a theme with the component theme function and include it with tokens() inside a selector, which emits CSS custom properties scoped to that selector.

This is the migration with the widest reach, because it touches every place you theme a component. Here is the before and after for a grid theme.

Before, using the per-component wrapper mixin and a separate typography mixin:

@use 'igniteui-angular/theming' as *;

@include core();
@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

$my-grid: grid-theme(
  $background: #ffffff,
  $accent-color: #0061a8
);

// Old pattern: the component wrapper mixin emitted the component's CSS rules
@include grid($my-grid);

After, using the single tokens() mixin scoped to the component selector:

@use 'igniteui-angular/theming' as *;

@include core();

$my-grid: grid-theme(
  $background: #ffffff,
  $accent-color: #0061a8
);

// New pattern: tokens() emits scoped CSS custom properties
igx-grid {
  @include tokens($my-grid);
}

The component theme function (grid-theme(), avatar-theme(), and so on) is unchanged, so your color and configuration inputs carry over. You replace the wrapper mixin call with a tokens() call inside the selector you want to style. Limitation: you do have to touch each theme block that used the old wrapper or typography mixins. Global palette and core() setup are unaffected, so this is a mechanical edit rather than a rewrite of your theme values.

Summary: The Six Changes in Ignite UI for Angular 22.1

Breaking Changes and Migration

Two changes in Ignite UI for Angular 22.1 require code edits, and both have a clear path.

The theming change is the larger one. The tokens() mixin replaces the per-component wrapper and typography mixins. Migrate by generating the same component theme with its theme function, then including it with @include tokens($theme) inside the target selector instead of calling the old wrapper mixin. Your palette, core(), and theme functions do not change.

The divider change is smaller. IgxDividerDirective becomes IgxDividerComponent, the ng update migration performs the rename, and the <igx-divider> selector stays the same.

For the dependency and platform changes, the migration is subtraction. Remove hammerjs from package.json if nothing in your own code uses it. To go zoneless, add provideZonelessChangeDetection() at bootstrap and remove zone.js from your polyfills; if you prefer to stay on Zone.js, do nothing.

A recommended upgrade order:

1. Run ng update igniteui-angular to pull 22.1 and apply the automated migrations, including the divider rename.
2. Build with the new strict typings and fix any type errors that surface in your application code.
3. Migrate theme blocks that used per-component wrapper or typography mixins to the tokens() mixin.
4. Remove hammerjs from package.json if your own code does not use it directly.
5. Optionally go zoneless: add provideZonelessChangeDetection(), remove zone.js from polyfills, and test.

FAQ

What are the breaking changes in Ignite UI for Angular 22.1? There are two breaking changes. IgxDividerDirective is replaced by IgxDividerComponent, and the tokens() mixin replaces the per-component wrapper and typography mixins as the single way to apply a component theme. The divider rename is handled automatically by ng update, and the theming change is a mechanical edit that preserves your existing theme values.

How do I upgrade to Ignite UI for Angular 22.1? Run ng update igniteui-angular, which pulls the new version and runs the automated migrations, including the divider class rename. Then rebuild against the strict typings and fix any surfaced type errors, migrate theme blocks to the tokens() mixin, and optionally remove hammerjs and enable zoneless change detection. Ignite UI for Angular 22.1 targets the Angular 22 framework.

Do these changes also ship in Ignite UI for React, Web Components, or Blazor? No. The changes described here are specific to the Ignite UI for Angular library and the Angular framework. Zoneless support, the tokens() mixin change, strict TypeScript typings, hammerjs removal, and the divider component are Angular-specific and should not be assumed to apply to the React, Web Components, or Blazor products.

Do I have to migrate my existing Zone.js application? No. Ignite UI for Angular 22.1 runs identically whether your application uses Zone.js or runs zoneless, because the library no longer depends on NgZone for change detection either way. Going zoneless is an opt-in that you can schedule on your own timeline.

Do I have to rewrite my themes for the tokens() mixin? You do not rewrite your theme values, but you do edit how they are applied. Keep your palette, core() call, and component theme functions such as grid-theme(), and replace each per-component wrapper mixin call with @include tokens($theme) inside the selector you want to style. It is a mechanical change to the include statements, not a redesign of your theme.

What was deprecated or removed in Ignite UI for Angular 22.1? The hammerjs peer dependency is removed, with touch gestures now implemented on native Pointer and Touch Events, and IgxDividerDirective is removed in favor of IgxDividerComponent. You can delete hammerjs from package.json unless your own application code uses its gestures directly.

Ready to upgrade? Run ng update igniteui-angular and read the changelog for the full details.