Ignite UI for Angular 21.1: AI Skills & Grid Performance Improvements

Ignite UI for Angular 21.1 is now available on npm. This release advances the library’s dev-agentic strategy with three consolidated AI Copilot Skills shipped directly in the repository. It also brings the lightweight IgxGridLiteComponent Angular wrapper into Developer Preview and resolves a long-standing class of z-index problems by adopting the HTML Popover API across the overlay service. Run ng update igniteui-angular to upgrade.

What’s new in Ignite UI for Angular 21.1

• AI Copilot Skills: three structured knowledge files that teach Copilot, Cursor, Claude, and Windsurf how to work with Ignite UI components, grids, and theming; auto-discovered via ng update migration.
• IgxGridLiteComponent: (Developer Preview) — Angular wrapper around igc-grid-lite with two-way bindable sort/filter expressions and Angular template directives, available from the new igniteui-angular/grids/lite entry point.
• Grid Virtualization Performance: 100–150% FPS improvement and 50–60% reduction in total blocking time on 100k rows, driven by six targeted rendering and change-detection optimizations
• Overlay Popover API: IgxOverlayService and IgxNavigationDrawer now use the browser’s native top-layer API, eliminating z-index stacking bugs structurally.
• Intl-based i18n overhaul: new Intl implementation across all date/number formatting components plus a new igniteui-i18n-resources package.

Breaking change: igxForOf and all grids no longer detect mutations on the original data array; pass a new array reference to trigger change detection

npm install igniteui-angular@21.1
Check out full changelog here.

Exciting AI Copilot Skills

Ignite UI for Angular 21.1 ships three consolidated Copilot Skill files directly in the repository — the most significant developer-experience addition in this release.

The three skills cover: Components (form controls, layout, data display, overlays, charts), Data Grids (data grid, tree grid hierarchical grid, pivot grid, column config, editing, remote data, state persistence), and Theming & Styling (palette, typography, elevations, and live MCP tooling).

Architecture: Lean Brain + Executable References

Each skill follows a two-layer structure that reflects current best practices for agent-consumable knowledge. The entry point is a SKILL.md file kept deliberately under 500 lines. It acts as the agent’s decision brain: routing logic, component selection rules, intent detection, and pointers to where detailed knowledge lives. It is never a dump of API documentation.

The heavy lifting sits in a references/ subdirectory alongside each skill. These files are designed as tiny CLIs — self-contained, executable knowledge units, each scoped to a single domain: API cheatsheets, canonical code patterns, domain logic (grid type selection heuristics, theming scope rules, compound component wiring). An agent executing a task loads only the reference files it needs for that specific task, not the entire library surface.

skills/
    igniteui-angular-components/
    ├── SKILL.md                  ← brain: routing + intent detection (<500 lines)
    └── references/
        ├── form-controls.md      ← Input Group, Combo, Select, pickers
        ├── layout.md             ← Tabs, Stepper, Accordion, Dock Manager
        ├── data-display.md       ← List, Card, chips, tree
        ├── overlays.md           ← Dialog, Snackbar, Tooltip, positioning
        └── charts.md             ← Area, Bar, Column, Financial, Pie
 
    igniteui-angular-grids/
    ├── SKILL.md                  ← brain: grid type selection + orchestration (<500 lines)
    └── references/
        ├── structure.md          ← column config, templates, selection, layout
        ├── features.md           ← editing, grouping, summaries, toolbar, export
        ├── types.md              ← Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid
        ├── data-operations.md    ← sorting, filtering, grouping, import patterns
        ├── paging-remote.md      ← paging, remote ops, virtualization
        ├── editing.md            ← cell/row/batch editing, validation
        └── state.md              ← state persistence, grid-type specifics
 
    igniteui-angular-theming/
    ├── SKILL.md                  ← brain: palette/schema/MCP orchestration (<500 lines)
    └── references/               ← token discovery, component theme scaffolding

This structure matters for agent performance. A SKILL.md that is a 4,000-line wall of API documentation is not a skill — it is a context window tax. Keeping SKILL.md lean means the agent can make routing decisions cheaply and load only the reference it needs, rather than dragging the entire API surface into every completion call.

GitHub Copilot discovers skills automatically via .github/copilot-instructions.md. Cursor picks them up from the skills/ directory. Claude Desktop and Claude Code users can add the files to project knowledge or reference them in CLAUDE.md. JetBrains AI and Windsurf users can attach them manually. This release ships an optional ng update migration that copies the full skill tree into your project.

This is not a standalone feature — it is the next layer in a strategy that started with the igniteui-theming MCP server. Where the MCP server gave agents access to live theming tools for palette generation and component theme scaffolding, the Skills give agents the declarative knowledge they need to correctly choose, configure, and compose those tools. Together, they form a complete AI-assisted workflow: the agent knows what to build, and the MCP server gives it the instruments to build it. What this model of UI library + MCP + skills looks like in practice made the case clearly — 21.1 is Infragistics shipping the Angular implementation.

Here’s the AI-Assisted Development documentation.

IgxGridLiteComponent (Developer Preview)

IgxGridLiteComponent is an Angular wrapper around the igc-grid-lite Web Component, now available from a dedicated igniteui-angular/grids/lite entry point.

Grid Lite is designed for scenarios where you need high-throughput read-oriented data display without the full feature surface of IgxGridComponent — no editing, grouping, paging, or summaries, but with virtualization, sorting, filtering, and Angular template directives for cells and headers. The wrapper adds two-way bindable sortingExpressions and filteringExpressions inputs so the grid integrates naturally with Angular’s reactivity model.

import {
  IgxGridLiteComponent,
  IgxGridLiteColumnComponent,
  IgxGridLiteCellTemplateDirective
} from 'igniteui-angular/grids/lite';
@Component({
  imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <igx-grid-lite [data]="data()">
      <igx-grid-lite-column field="name" header="Name" [sortable]="true">
        <ng-template igxGridLiteCell let-value>
          <strong>{{ value }}</strong>
        </ng-template>
      </igx-grid-lite-column>
    </igx-grid-lite>
  `
})
export class UsersLiteComponent {
  data = signal<User[]>([]);
}

Note that Grid Lite requires the separate igniteui-grid-lite peer package (npm i igniteui-grid-lite) and CUSTOM_ELEMENTS_SCHEMA because the underlying component is a Web Component. It uses its own IgxGridLiteSortingExpression and IgxGridLiteFilteringExpression types — not the standard ISortingExpression/FilteringExpressionsTree from the full grids.

Here’s the Grid Lite documentation.

Grid Virtualization & Scrolling Performance

IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, and IgxPivotGrid received a targeted set of six rendering and change-detection optimizations in 21.1. The combined result on a 100k-row dataset with 100 scroll operations: ~40–55 FPS vs. ~15–25 FPS before (100–150% improvement), and total blocking time reduced from ~8–12 seconds to ~3–5 seconds (50–60% reduction).

The individual optimizations each address a distinct bottleneck in the virtual scroll pipeline:

CSS positioning switched to transform: translateY() eliminates layout reflow on row repositioning. Previously, writing to style.top forced the browser into a synchronous layout cycle per scroll frame. GPU-accelerated transforms bypass that entirely — paint time drops by an estimated 50–70% per scroll event.

Change detection moved from ngDoCheck to property setters cuts the number of change-detection evaluations by 30–50%. ngDoCheck fires on every Angular CD cycle regardless of whether scroll state has changed; a property setter fires exactly once when data changes.

Scroll event throttling dropped to 40ms (from ~60+ raw events per second to ~25 processed per second, roughly 60% fewer handlers executing). This is dynamic: the throttle window adjusts based on the number of visible rows, so performance in sparse views is not artificially capped.

Pre-allocated arrays replace push() in sizesCache building. Repeated push() calls trigger O(n) internal resize-and-copy operations as the array grows. Pre-allocating with new Array(n) turns that into O(1) direct index assignment – 20–40% faster cache construction during virtual scroll initialization.

Cached DOM element lookup replaces repeated .map() traversals per scroll event with a single traversal whose result is held in a getter -15–25% fewer CPU cycles per scroll event.

Duplicate @HostListener scroll event path removed, eliminating a redundant event processing branch for an additional 10–15% overhead reduction.

The aggregate measured impact on benchmarked hardware (100k rows, 100 scroll operations):

Metric	Before	After	Delta
Long Tasks Count	~80–120	~30–50	−50% to −60%
Avg Long Task Duration	~80–120ms	~55–75ms	−30% to −40%
Total Blocking Time	~8–12 sec	~3–5 sec	−50% to −60%
Frames per second	~15–25 fps	~40–55 fps	+100% to +150%

No API changes are required to benefit from these improvements. The optimizations apply automatically to any grid bound to a data source.

Here’s the Grid performance documentation.

Overlay Popover API

IgxOverlayService and IgxNavigationDrawer now use the browser’s native HTML Popover API to place overlay elements in the top layer.

The practical effect: overlays, dropdowns, dialogs, and the navigation drawer when unpinned no longer compete with your application’s z-index stack. Instead, they land in the browser’s dedicated top layer — the same layer used by native <dialog> and popover elements — which is always above the regular document stacking context regardless of any z-index value. This resolves an entire class of issues that required manual z-index tuning in complex layouts, particularly in applications using multiple stacking contexts (transformed containers, Dock Manager regions, etc.). Positioning accuracy for container-based overlays with fixed container bounds is also improved.

No API changes are required on your side. The behavior upgrade is applied transparently to existing overlaySettings usage.

Here’s the Overlay service documentation.

Intl-based i18n and New igniteui-i18n-resources Package

The localization system across all Ignite UI for Angular components that format or display dates and numbers has been rebuilt on the browser-native Intl API.

Affected components include IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid, IgxCalendar, IgxDatePicker, IgxDateRangePicker, IgxTimePicker, IgxCombo, IgxList, IgxPaginator, IgxQueryBuilder, and more. The previous Angular-pipe-based formatting is still used when an Angular locale is configured; Intl is used when no locale is set, or when explicitly enabled via the new public API.

A new package, igniteui-i18n-resources, ships alongside this change, containing the resource strings for all 19 supported languages under the new implementation. The old igniteui-angular-i18n strings and API remain functional — no forced migration, no behavioral change unless you opt in.

// New API: toggle fully to Intl-based formatting
import { configureLocalization } from 'igniteui-i18n-resources';
configureLocalization({ useIntl: true, locale: 'de-DE' });

Here’s the Localization documentation.

More in This Release

PDF Exporter — Unicode font support. IgxPdfExporterOptions now accepts a customFont property, allowing you to provide any TTF font as base64-encoded data. The default Helvetica font is limited to basic Latin; this unlocks Cyrillic, Chinese, Japanese, Arabic, Hebrew, and other scripts in exported PDFs.

IgxTooltipTarget — configurable triggers. New showTriggers and hideTriggers inputs accept comma-separated event names (e.g. 'click,focus', 'keypress,blur'), replacing the previous fixed pointerenter/pointerleave behavior.

Breaking Changes & Migration

Data array mutation detection removed
Affected: igxForOf, IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
What changed: Adding, removing, or reordering records by mutating the original array (push, splice, sort, etc.) no longer triggers change detection. Components now require an array reference change to update.

Migration: Replace mutations with immutable operations, [...data, newItem] instead of data.push(newItem), or assign a new array reference after mutations.

// Before (no longer works)
this.data.push(newRecord);
// After (required)
this.data = [...this.data, newRecord];
// or with signals:
this.data.update(prev => [...prev, newRecord]);

IgxGridGroupByAreaComponent entry point change
Affected: Any import of IgxGridGroupByAreaComponent from igniteui-angular/grids/core
What changed: The component has moved to the igniteui-angular/grids/grid entry point.
Migration: Run ng update igniteui-angular — the migration will prompt you to update the import path automatically.

Here are the migration guide and update instructions.

No additional breaking changes in this release beyond the two listed above.

How to Get Started

Install or upgrade Ignite UI for Angular today:

# New install
npm install igniteui-angular@21.1
# Upgrade existing project (runs migrations automatically)
ng update igniteui-angular
# Grid Lite peer dependency (required for IgxGridLiteComponent)
npm install igniteui-grid-lite

• Release Notes & Full Changelog
• Getting Started Guide
• AI-Assisted Development Guide
• GitHub Discussions