Ignite UI for Angular 21.1:AIスキルとグリッド性能向上

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

このリリースは、ライブラリの開発エージェント戦略を推進し、3つの統合されたAIコパイロットスキルをリポジトリに直接提供しています。しかし、それだけではありません。詳細はこちらをご覧ください。

10min read

Ignite UI for Angular 21.1は現在npmで利用可能です。このリリースは、ライブラリの開発エージェント戦略を推進し、3つの統合されたAIコパイロットスキルをリポジトリに直接提供しています。またIgxGridLiteComponentAngular軽量ラッパーをDeveloper Previewに取り入れ、オーバーレイサービス全体でHTMLポップオーバーAPIを採用することで長年続いていたzインデックスの問題を解決します。アップグレードng update igniteui-angular走れ。

Ignite UI for Angular 21.1の新要素

  • AI Copilot Skills:Copilot、Cursor、Claude、Windsurfにコンポーネント、グリッド、テーマの扱い方を教える3つの構造化された知識ファイルIgnite UI自動発見ng updateVia Migration。
  • IgxGridLiteComponent: (Developer Preview)—Angularのラッパーigc-grid-lite双方向のソート/フィルター式とAngularテンプレート指令を備え、新しいエントリーポイントから利用可能ですigniteui-angular/grids/lite。
  • グリッド仮想化性能:100k行で100〜150%のFPS向上と総ブロッキング時間を50〜60%削減。これは6つのターゲットを絞ったレンダリングおよび変更検出の最適化によって推進されます
  • オーバーレイPopover API:IgxOverlayService andIgxNavigationDrawer nowはブラウザのネイティブトップレイヤーAPIを使用し、zインデックススタッキングのバグを構造的に除去します。
  • 国際ベースのi18nオーバーホール:すべての日付・数字フォーマットコンポーネントIntl新たに実装され、さらに新しいigniteui-i18n-resourcesパッケージが追加されました。

変更の停止:igxForOfすべてのグリッドが元のデータ配列の変異を検出しなくなり、新しい配列参照を渡して変更検出をトリガーします

npm install igniteui-angular@21.1
​完全な変更履歴はこちらでご覧いただけます。

Exciting AI Copilot Skills

Ignite UI for Angular 21.1では、リポジトリに3つの統合されたCopilot Skillファイルが直接提供されており、これはこのリリースで最も重要な開発者体験の追加要素です。

3つのスキルは、コンポーネント(フォームコントロール、レイアウト、データ表示、オーバーレイ、チャート)、データグリッド(データグリッド、ツリーグリッド階層グリッド、ピボットグリッド、列設定、編集、リモートデータ、状態永続性)、およびテーマ&スタイリング(パレット、タイポグラフィ、立面図、ライブMCPツール)をカバーします。

アーキテクチャ:リーンブレイン + 実行可能なリファレンス

各スキルは、エージェント消費可能な知識に関する現在のベストプラクティスを反映した二層構造に従っています。エントリーポイントは意図的に500行未満に保たれたSKILL.mdファイルです。それはエージェントの意思決定の脳として機能し、ルーティングロジック、コンポーネント選択ルール、意図検出、詳細な知識の所在を示す指針を行います。APIドキュメントのダンプではありません。

重い作業は各スキルの隣にあるサブディレクトリreferences/に分かれています。これらのファイルは小さなCLIとして設計されており、自己完結型の実行可能な知識単位で、それぞれが単一のドメインにスコープが割り当てられています:APIチートシート、標準的なコードパターン、ドメインロジック(グリッド型選択ヒューリスティック、テーマスコープルール、複合コンポーネント配線)です。タスクを実行するエージェントは、そのタスクに必要な参照ファイルのみを読み込み、ライブラリ全体の表面を読み込むわけではありません。

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

この構造はエージェントのパフォーマンスに重要です。ASKILL.mdそれは4,000行にわたるAPIドキュメントの壁ですが、それはスキルではなく、コンテキストウィンドウ税です。保持SKILL.mdリーンとは、エージェントがルーティングの決定を安価に行い、必要な参照だけを読み込めることを意味します。完了コールにAPI表面全体をドラッグする必要がなくなります。

GitHub Copilotは.github/copilot-instructions.mdを通じて自動的にスキルを発見します。カーソルはskills/ディレクトリからそれらをピックアップします。Claude DesktopおよびClaude Codeユーザーは、プロジェクト知識に追加したり参照したりできますCLAUDE.md。JetBrainsのAIやWindsurfユーザーは手動で接続可能です。このリリースでは、スキルツリー全体をプロジェクトにコピーするオプションng update移行が提供されます。

これは独立した機能ではなく、MCPサーバーから始まった戦略の次の層igniteui-themingものです。MCPサーバーがパレット生成やコンポーネントテーマのスキャフォールディングのためのライブテーマツールへのアクセスを提供したのに対し、スキルはエージェントがそれらのツールを正しく選択、設定、構成するための宣言的知識を提供します。これらは一体化して完全なAI支援ワークフローを形成します。エージェントは何を作るべきか知り、MCPサーバーがそれを構築するためのツールを提供します。このUIライブラリ+MCP+スキルのモデルが実際にどのようなものかは明確に示しており、21.1はインフラ情報がAngular実装を出荷しているのです。

こちらがAI支援開発のドキュメントです。

IgxGridLiteComponent (Developer Preview)

IgxGridLiteComponent​igc-grid-liteWebコンポーネントを包むAngularラッパーで、現在は専用のエントリーポイントから利用可能ですigniteui-angular/grids/lite。

Grid Liteは、編集、グループ化、ページング、要約なしの高スループット読み取り指向データ表示がIgxGridComponent、セルやヘッダーの仮想化、ソート、フィルタリング、テンプレート指示Angular対応を備えたシナリオ向けに設計されています。ラッパーは双方向のバインダブルsortingExpressionsandfilteringExpressions入力を追加し、グリッドがAngularの反応モデルと自然に統合されます。

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[]>([]);
}

Grid Liteは別個のピアパッケージ(igniteui-grid-lite)npm i igniteui-grid-liteが必要でありCUSTOM_ELEMENTS_SCHEMA基盤コンポーネントがWebコンポーネントであるためです。標準のIgxGridLiteSortingExpression/IgxGridLiteFilteringExpressionではなく、独自のISortingExpressionandFilteringExpressionsTreeタイプを使用しています。

Here’s the Grid Lite documentation.

グリッド仮想化とスクロール性能

IgxGrid​IgxTreeGrid,IgxHierarchicalGrid、およびIgxPivotGrid21.1で6つのレンダリングおよび変更検出の最適化を目標にしました。100k行データセットで100回のスクロール操作を組み合わせた結果:~40–55 FPS 対 15–25 FPS前(100–150%改善)、総ブロッキング時間は~8–12秒から~3–5秒に短縮されました(50–60%の短縮)。

各最適化は、仮想スクロールパイプライン内の異なるボトルネックに対応しています:

CSSの位置付けはtransform: translateY()列の配置変更によるレイアウトのリフローを排除します。以前は、書き込みstyle.topスクロールフレームごとに同期レイアウトサイクルに強制的に入っていました。GPU加速変換はそれを完全に回避し、1回のスクロールイベントごとにペイント時間が約50〜70%短縮されます。

変更検出をngDoCheckプロパティセッターからプロパティセッターに移行することで、変更検出評価の回数が30〜50%削減されますngDoCheckスクロールの状態が変わっていなくても、Angular CDサイクルごとに発射されます。プロパティセッターはデータが変更された際に正確に一度だけ送信します。

スクロールイベントのスロットリングは40msに減少し(1秒あたり~60+の生イベントから~25/秒に、実行されるハンドラ数が約60%減少)、これは動的で、スロットルウィンドウは見える行数に応じて調整されるため、スパースビューでの性能は人工的に制限されません。

事前割り当てされたアレイはpush()​sizesCache構築中に置換します。繰り返されるpush()呼び出しは配列が成長するにつれてO(n)の内部リサイズおよびコピー操作を引き起こします。で事前割り当てnew Array(n)すると、それをO(1)の直接インデックス割り当てに変換し、仮想スクロール初期化時にキャッシュ構築が20〜40%速くなります。

キャッシュされたDOM要素の検索は、スクロールイベントごとの繰り.map()返されるトラバーサルを単一のトラバーサルに置き換え、その結果はゲッターに保持され、スクロールイベントあたりのCPUサイクルは-15〜25%少なくなります。

重複@HostListenerスクロールイベントパスが削除され、冗長なイベント処理ブランチが排除され、さらに10〜15%のオーバーヘッド削減が実現しました。

ベンチマークされたハードウェアへの影響(10万行、100スクロール操作)を総合的に測定しました:

Metric以前は後Delta
Long Tasks Count~80–120~30–50−50%から−60%
Avg Long Task Duration~80–120ms~55–75ms−30%から−40%まで
Total Blocking Time~8–12 sec~3–5 sec−50%から−60%
Frames per second~15–25 fps~40–55 fps+100%から+150%へ

これらの改善の恩恵を受けるためにAPIの変更は必要ありません。最適化はデータソースに割り当てられた任意のグリッドに自動的に適用されます。

こちらがGridのパフォーマンスドキュメントです。

Overlay Popover API

IgxOverlayServiceそしてIgxNavigationDrawerブラウザのネイティブHTMLポップオーバーAPIを使って、上層にオーバーレイ要素を配置します。

実際の効果としては、オーバーレイ、ドロップダウン、ダイアログ、ナビゲーションドロワーがピン留めされていないと、アプリケーションのzインデックススタックと競合しなくなります。代わりに、ブラウザ専用の最上層に到達します。これはnative<dialog> andpopover elementsが使う同じ層で、通常のドキュメントスタッキングコンテキストの上位に位置し、どんな価値z-indexも関係ありません。これにより、複雑なレイアウト、特に複数のスタッキングコンテキスト(変換コンテナ、ドック マネージャー領域など)を使用するアプリケーションで手動でzインデックス調整が必要だった一連の問題が解決されます。固定コンテナ境界を持つコンテナベースのオーバーレイの位置精度も向上しています。

あなたの側でAPIの変更は必要ありません。この挙動アップグレードは既存の使用者に透過的に適用overlaySettings。

こちらがOverlayのサービスドキュメントです。

Intlベースのi18nおよびNew igniteui-i18n-resourcesパッケージ

日付や数字のフォーマットや表示を行うすべてのIgnite UI for Angularコンポーネントのローカリゼーションシステムは、ブラウザネイティブIntlAPI上で再構築されました。

影響を受けるコンポーネントにはIgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid、IgxCalendar、IgxDatePicker、IgxDateRangePicker、IgxTimePicker、IgxCombo、IgxList、IgxPaginator、IgxQueryBuilderなどが含まれます。以前のAngular-pipeベースのフォーマットは、Angularロケージを設定する際にも引き続き使われています;Intlロケーションが設定されていない場合や、新しい公開APIで明示的に有効化された場合に使用されます。

この変更とともに、新しいパッケージigniteui-i18n-resourcesがリリースされ、新実装でサポートされている19言語すべてのリソース文字列が含まれています。旧igniteui-angular-i18n文字列とAPIは引き続き機能しており、強制的な移行や行動の変更はオプトインしない限りありません。

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

こちらがローカリゼーションのドキュメントです。

このリリースでさらに詳しい情報

PDFエクスポーター — Unicodeフォントサポート。 IgxPdfExporterOptions今、はcustomFontこれにより、任意のTTFフォントをbase64でエンコードされたデータとして提供できます。デフォルトのヘルベティカフォントは基本的なラテン語に限定されています。これにより、エクスポートされたPDFでキリル文字、中国語、日本語、アラビア語、ヘブライ語などの文字が解放されます。

IgxTooltipTarget — configurable triggers. NewshowTriggers andhideTriggers inputsは、以前の固定された'click,focus'/'keypress,blur'動作を置き換え、カンマ区切られたイベント名(例:pointerenter、pointerleave)を受け入れます。

Breaking Changes & Migration

データアレイの突然変異検出が削除されました
影響を受ける:igxForOf,IgxGrid,IgxTreeGrid,IgxHierarchicalGrid、IgxPivotGrid
変更点:元の配列(push、splice、sortなど)を変異させてレコードを追加、削除、または並べ替えしても、変更検出はもはやトリガーされません。コンポーネントは更新のために配列参照の変更が必要になりました。

移行:変異を不変演算[...data, newItem]代わりにdata.push(newItem)に置き換えたり、突然変異後に新しい配列参照を割り当てる。

// 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エントリーポイントの変更
影響を受ける:IgxGridGroupByAreaComponentからのインポートigniteui-angular/grids/core
変更点:コンポーネントがigniteui-angular/grids/gridエントリーポイントに移動しました。
移行:実行ng update igniteui-angular— 移行中にインポートパスを自動的に更新するよう促されます。

こちらが移行ガイドとアップデート手順です。

上記の2つ以外に、このリリースで追加の重大な変更はありません。

使用を開始する方法

今すぐIgnite UI for Angularを設置またはアップグレードしてください:

# 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

Angular
デモを予約