Ignite UI for Angular 21 リリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 21 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。

• Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。

はじめに

Ignite UI for Angular は、50 種類以上のマテリアルデザインに対応する Angular 対応コンポーネントです。モバイル向けのコンポーネントだけではなく、データグリッドや、コンボ、カレンаダーなど、業務アプリで必須の機能を持ったコンポーネントを提供しています。

Ignite UI for Angular のバージョニング

Ignite UI for Angular は、有名なセマンティックバージョニングとは異なる方式でバージョンがつけられています。詳しくは下記の記事をご覧ください。

Ignite UI for Angular 21.0.11 リリースノート

ここからは、GitHub の 21.0.11 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(grid): 最後のレイアウト行から下方向にナビゲーションした際に、行インデックスが範囲外になる問題を修正しました (#16756)。
• fix(stepper): 垂直ステッパーでコンテンツがずれる問題を防止しました (#16832)。
• refactor(textarea): すべてのテーマで下部パディングを追加し、不要なマージンを削除しました (#16803)。
• fix(grids): 通貨およびパーセント列に number-style クラスを適用しました (#16849)。
• fix(input/combo/select): カーソルの動作に関する問題を修正しました (#16866)。
• fix(simple-combo): プログラムによるコンボを閉じる時にフォーカスを設定するように修正しました (#16868)。
• fix(treeGrid): 一部のケースで展開状態が false ではなく 0 を返している問題を修正しました (#16715)。

Ignite UI for Angular 21.0.10 リリースノート

ここからは、GitHub の 21.0.10 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• 展開状態を検証する際に主キーをチェックするようにしました (#16799)。
• 「feat(PDF): カスタム フォントのサポートを追加しました。」を元に戻しました (#16853)。

Ignite UI for Angular 21.0.9 リリースノート

ここからは、GitHub の 21.0.9 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(stepper): タイトルが長い場合でもステップ インジケーターが縮小されないようにしました (#16819)。
• fix(autocomplete): Tab キー押下時に super.handleKeyDown を呼び出さないようにしました (#16651)。
• feat(PDF): カスタム フォントのサポートを追加しました (#16679)。

Ignite UI for Angular 21.0.8 リリースノート

ここからは、GitHub の 21.0.8 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(grid): 無効化された行に対するゴースト レコードの処理を更新しました (#16764)。
• fix(toast): タイポグラフィ スタイルから igx-icon を除外しました (#16790)。
• fix(grid): type-style の定義が button-group のスタイルをオーバーライドしないよう修正しました (#16767)。
• style(grid): セレクターとしてタグではなくネイティブ input クラスを使用するようにしました (#1677)。

Ignite UI for Angular 21.0.7 リリースノート

ここからは、GitHub の 21.0.7 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(merge-strategy): merge メソッドに戻り値のタイプを追加しました (#16776)。
• fix(igxGrid): ユーザー設定の pin 設定をデフォルト設定と結合するようにしました (#16762)。
• fix(pdf): jspdf の依存関係を 4.0.0 に更新しました (#16778)。

Ignite UI for Angular 21.0.6 リリースノート

ここからは、GitHub の 21.0.6 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(navbar): Indigo テーマでの igx-icon のパディングを修正しました (#16692)。
• fix(grid): Excel スタイル フィルタリングのリグレッションを修正し、theming のバージョンを更新しました (#16685)。
• fix(excel-filtering): バリアントのマッピングを更新し、button の type-style を使用するようにしました (#16697)。
• fix(button): 破棄時に animationScheduler のサブスクリプションをチェックする処理を追加しました (#16735)。
• 複数行レイアウト列レイアウトのデモからエクスポートツールバーを削除しました (#16726)。
• fix(ESF): 検索リストに表示される項目が現在の選択状態を反映するようにしました state (#16739)。
• fix(export): データが存在しない場合のチェックを追加しました (#16723)。
• fix(elements): public inject が Web Components に追加されないよう抑制しました (#16749)。
• feat(chip): 新しい ghost テキスト カラーのプロパティを使用するようにしました (#16666)。
• fix(csv): 集計のエクスポートを修正しました (#16747)。
• fix(elements, cell-merge): analyzer のプロパティ/ストラテジーおよび pivot のゲッターを抑制しました (#16752)。
• fix(calendar): 週番号の計算関数を修正しました (#16682)。
• Excel スタイル フィルタリングのカスタム日付ダイアログで、Date Picker の searchVal バインディングを修正しました (#16704)。

Ignite UI for Angular 21.0.5 リリースノート

ここからは、GitHub の 21.0.5 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(*): clearHighlight() に null チェックを追加し、早期破棄に対するテストを追加しました (#16673)。
• fix(igxGrid): 未統合行と統合済み行のクラスおよびボーダーが一致するようにしました (#16688)。
• fix(IgxGrid): 統合処理でスキップされる特別なレコードタイプに、集計行を追加しました (#16686)。
• refactor(chip): Indigo カラーを更新しました (#16690)。
• fix(*): marked パッケージとのピア依存関係の競合を解消しました (#16729)。

Ignite UI for Angular 21.0.4 リリースノート

ここからは、GitHub の 21.0.4 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(grid): グリッド セル内の入力に切り込み境界が表示される問題を修正しました (#16632)。
• fix(slider): flex-grow を削除しました (#16631)。
• fix(button): requestAnimationFrame の代わりに animationFrameScheduler を使用するようにしました (#16645)。
• fix(grid): 列がサイズ キャッシュを計算する際に、制約を一箇所で適用するようにしました (#16634)。
• chore: PR #16618 (カレンダーの日付スタイルおよびフォーマット修正) をチェリーピックしました (#16647)。

Ignite UI for Angular 21.0.3 リリースノート

ここからは、GitHub の 21.0.3 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(tooltip): ネストされたツールチップでも矢印が表示されるよう修正しました (#16608)。
• fix(docs): chat の README と changelog 情報を追加しました (#16583)。
• fix(grids): public_api からグリッド モジュールが正しくエクスポートされるよう修正しました (#16622)。

Ignite UI for Angular 21.0.2 リリースノート

ここからは、GitHub の 21.0.2 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• fix(*): 公開 API のルート エントリから chat の再エクスポートを削除しました (#16611)。

Ignite UI for Angular 21.0.1 リリースノート

ここからは、GitHub の 21.0.1 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

• 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

• ツリー グリッドの子データ レコードに適切なインデントを設定しました (#16595)。
• 階層グリッド: 内部レベルの子データが PDF に正しくエクスポートされるようにしました (#16594)。
• CSV: 利用可能な場合は常に列ヘッダーを出力するようにしました (#16597)。

Ignite UI for Angular 21.0.0 リリースノート

ここからは、GitHub の 21.0.0 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

新機能

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

グリッド コンポーネントに PDF エクスポート機能が追加されました。これにより、既存の Excel および CSV に加えて、PDF 形式へのエクスポートが可能になります。

新しい IgxPdfExporterService は、Excel および CSV エクスポーターと同じパターンに従います。

import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular';

constructor(private pdfExporter: IgxPdfExporterService) {}

exportToPdf() {
    const options = new IgxPdfExporterOptions('MyGridExport');
    options.pageOrientation = 'landscape'; // 'portrait' or 'landscape' (default: 'landscape')
    options.pageSize = 'a4'; // 'a3', 'a4', 'a5', 'letter', 'legal', etc.
    options.fontSize = 10;
    options.showTableBorders = true;
    
    this.pdfExporter.export(this.grid, options);
}

グリッド ツールバーのエクスポーター コンポーネントには PDF エクスポート ボタンが追加されています。

<igx-grid-toolbar>
    <igx-grid-toolbar-exporter 
        [exportPDF]="true" 
        [exportExcel]="true" 
        [exportCSV]="true">
    </igx-grid-toolbar-exporter>
</igx-grid-toolbar>

主要機能:

• 複数ページ対応 (自動改ページあり)
• 階層構造の可視化 (TreeGrid のインデント、HierarchicalGrid の子テーブルなど)
• 複数レベルの列ヘッダー (列グループ) のサポート
• 集計行 (適切な値フォーマット付き)
• 長いコンテンツのトリミング (省略記号付き)
• 横向きレイアウト (幅の広いグリッド向けに既定設定)
• 国際化 (全 19 言語の サポート)
• すべてのグリッド エクスポート オプション (ignoreFiltering、ignoreSorting、ignoreColumnsVisibility など ) に対応

重大な変更

依存性注入のリファクタリング

• すべての内部 DI は、igniteui-angular 全体で inject() API を使用するようになりました (ライブラリ コード内のコンストラクター DI は廃止)。
• コンポーネントやサービスを拡張している場合、またはそれらのコンストラクターを直接呼び出している場合は、DIパラメーターを削除し、inject() に切り替える必要があります (例: protected foo = inject(FooService);)。
• テンプレート経由の通常利用には影響はなく、サブクラス化やオーバーライドを使用している場合のみ対応が必要です。

マルチ エントリ ポイントのサポート

ライブラリはツリーシェイキングとコード分割の向上のため複数エントリ ポイントをサポートします。メイン エントリ ポイント (igniteui-angular) はすべての細分化エントリ ポイントを再エクスポートするため完全な後方互換性がありますが、最適なバンドル サイズのためには新しいエントリ ポイントへの移行を推奨します。

エントリ ポイント:

igniteui-angular/core - コア ユーティリティ、サービス、および基本タイプ

igniteui-angular/directives - 共通ディレクティブ

コンポーネント別のエントリ ポイント: igniteui-angular/grids、igniteui-angular/input-group、igniteui-angular/drop-down など

グリッド関連のツリーシェイカブルなエントリ ポイント:

• igniteui-angular/grids/core - 共有 Grid インフラストラクチャ (列、ツールバー、フィルタリング、ソートなど)
• igniteui-angular/grids/grid - 標準 Grid コンポーネント (IgxGridComponent)
• igniteui-angular/grids/tree-grid - Tree Grid コンポーネント (IgxTreeGridComponent)
• igniteui-angular/grids/hierarchical-grid - Hierarchical Grid コンポーネント (IgxHierarchicalGridComponent、IgxRowIslandComponent)
• igniteui-angular/grids/pivot-grid - Pivot Grid コンポーネント(IgxPivotGridComponent、IgxPivotDataSelectorComponent)

移行:

ng update 実行時に、新しいエントリ ポイントへのインポート移行を行うかどうか確認するプロンプトが表示されます。移行しない場合は、完全な下位互換性を保ちながらメイン エントリ ポイントを引き続き使用できます。

手動で後から移行する場合:

ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0 --migrate-imports

コンポーネントの移動:

• Input ディレクティブ (IgxHintDirective、IgxInputDirective、IgxLabelDirective、IgxPrefixDirective、IgxSuffixDirective) → igniteui-angular/input-group
• IgxAutocompleteDirective → igniteui-angular/drop-down
• IgxRadioGroupDirective → igniteui-angular/radio

タイプ名の変更 (衝突回避のため):

• Direction → CarouselAnimationDirection (Carousel)

メリット:

• 高度なツリーシェイキング - 未使用のコンポーネントはバンドルされません
• コード分割 - 各コンポーネントを個別に遅延読み込みできます
• より小さなバンドルサイズ - 必要なものだけをインポートします
• ビルド パフォーマンスの向上

エントリ ポイントの詳細は、Angular Package Format のドキュメント を参照してください。

サンプル

Ignite UI for Angular を初めて使う、という方は是非こちらから

• オンラインサンプル
  

  jp.infragistics.com

• トライアルの開始
  

Angular API

Ignite UI for Angular の API はこちらから

• Angular API Typedoc
• Angular API Sass

ナレッジベース

お客様の問題解決に役立つナレッジベースを公開しています。

ナレッジベースはこちらから

https://kb.jp.infragistics.com/