https://blogs.jp.infragistics.com/entry/ignite-ui-for-angular-211

Ignite UI for Angularリリースノート

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

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

はじめに

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

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

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

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

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

新機能

IgxPdfExporterService
- PDF エクスポートで Unicode 文字をサポートするために IgxPdfExporterOptions に customFont プロパティを追加しました。デフォルトでは、PDF エクスポーターは基本的なラテン文字のみをサポートする Helvetica を使用します。ラテン文字以外 (キリル文字、中国語、日本語、アラビア語、ヘブライ語、特殊記号など) を含むデータをエクスポートする場合、必要な文字グリフを持つカスタム TrueType フォント (TTF) を提供できるようになりました。
```
import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';
import { NOTO_SANS_REGULAR, NOTO_SANS_BOLD } from './fonts/noto-sans';

constructor(private pdfExporter: IgxPdfExporterService) {}

exportWithUnicodeSupport() {
    const options = new IgxPdfExporterOptions('GridExport');
    options.customFont = {
        name: 'NotoSans',
        data: NOTO_SANS_REGULAR,
        bold: {
            name: 'NotoSans-Bold',
            data: NOTO_SANS_BOLD
        }
    };
    
    this.pdfExporter.export(this.grid, options);
}
```
  主要機能:
  - Base64 エンコードデータとして提供される TrueType フォント (TTF) をサポートします。
  - ヘッダースタイル用のオプションの太字フォント。
  - カスタムフォントの読み込みに失敗した場合、Helvetica に自動的にフォールバックします。
  - すべてのグリッドタイプ (IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid) で動作します。
IgxTooltipTarget
- 新しいプロパティを追加しました:
  - showTriggers - ツールチップを表示するイベントトリガーを指定します。異なるイベントトリガーのコンマ区切り文字列を受け取ります。デフォルト値は pointerenter です。
  - hideTriggers - ツールチップを非表示にするイベントトリガーを指定します。異なるイベントトリガーのコンマ区切り文字列を受け取ります。デフォルト値は pointerleave と click です。
```
<igx-icon [igxTooltipTarget]="tooltipRef" [showTriggers]="'click,focus'" [hideTriggers]="'keypress,blur'">info</igx-icon>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
```
IgxNavigationDrawer - HTML Popover API を統合し、ピン固定されていない場合にオーバーレイ要素を最上位レイヤーに配置することで、z-index スタッキングの問題を解消しました。
IgxOverlayService
- HTML Popover API をオーバーレイサービスに統合し、z-index 管理とレイヤー制御を改善しました。
- オーバーレイサービスは Popover API を使用してオーバーレイ要素を最上位レイヤーに配置し、z-index スタッキングの問題を解消しました。
- 固定コンテナー境界を持つコンテナーベースのオーバーレイの配置精度を改善しました。
AI 支援開発 - Copilot スキル
- リポジトリに 3 つの統合された Copilot スキルが含まれ、AI コーディングアシスタント/エージェント (GitHub Copilot、Cursor、Windsurf、Claude、JetBrains AI など) に Ignite UI for Angular の使用方法を教えます:
  - コンポーネント - UI コンポーネント (フォームコントロール、レイアウト、データ表示、フィードバック/オーバーレイ、ディレクティブ - 入力グループ、コンボ、選択、日付/時刻ピッカー、カレンダー、タブ、ステッパー、アコーディオン、リスト、カード、ダイアログ、スナックバー、ボタン、リップル、ツールヒント、ドラッグアンドドロップ、レイアウトマネージャー、ドックマネージャー、チャート (エリアチャート、棒チャート、縦棒チャート、株価/ファイナンシャルチャート、円チャート))
  - データグリッド - データグリッド (グリッドタイプの選択、列の構成、ソート、フィルタリング、選択、編集、グループ化、ページング、リモートデータ、状態保持、ツリーグリッド、階層グリッド、グリッドライト、ピボットグリッド)
  - テーマ設定とスタイル設定 - テーマ設定とスタイル設定 (ライブテーマツール用の MCP サーバーセットアップを含む)
- これらのスキルは、エージェントのスキルパス (例: .claude/skills) に配置されると自動的に検出され、このリリースにはプロジェクトに追加するためのオプションの移行が付属しています。詳細については、README を参照してください。

igx-grid-lite Web コンポーネントに IgxGridLiteComponent ラッパーを追加しました (開発者プレビュー)。

igniteui-angular/grids/lite エントリポイントから利用できます。ラッパーコンポーネントは、双方向バインド可能な sortingExpressions および filteringExpressions を含む類似の入力、igxGridLiteCell および igxGridLiteHeader ディレクティブを介した宣言的なテンプレートによる Angular テンプレートベースのセルおよびヘッダーレンダリングを備えた Angular フレンドリーな API を追加します。

npm i igniteui-grid-lite

import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteHeaderTemplateDirective, IgxGridLiteCellTemplateDirective } from "igniteui-angular/grids/lite";

@Component({
    selector: 'app-grid-lite-sample',
    templateUrl: 'grid-lite.sample.html',
    imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteHeaderTemplateDirective, IgxGridLiteCellTemplateDirective]
})
export class GridLiteSampleComponent { }

<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>

一般

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid
- グリッドに表示されるデータに基づいてスクロールスロットルを動的に調整することでパフォーマンスを改善しました。
IgxCombo、IgxSimpleCombo
- Combo および Simple Combo は、「Tab」キーを押すとドロップダウンリストを閉じて次のフォーカス可能な要素にフォーカスを移動するようになりました。また、「Escape」キーを押してコンボが表示された場合は選択をクリアするようになりました。

重大な変更

igxForOf、igxGrid、igxTreeGrid、igxHierarchicalGrid、igxPivotGrid
- 元の data 配列の変更 (元の配列内のレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更が検出されるには、コンポーネントに配列参照の変更が必要です。
IgxGridGroupByAreaComponent は grids/core から grids/grid エントリポイントに移動しました。ng update 移行により、インポートを新しいエントリポイントにオプションで移行するように求められます。

ローカライズ (i18n)

IgxActionStrip、IgxBanner、IgxCalendar、IgxCarousel、IgxChip、IgxCombo、IgxDatePicker、IgxDateRangePicker、IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid、IgxInputs、IgxList、IgxPaginator、IgxQueryBuilder、IgxTimePicker、IgxTree
- 日付や数値などのデータを書式設定およびレンダリングする現在サポートされているすべてのコンポーネント用の新しい Intl 実装。
- 現在サポートされている言語でリソース文字列を持つすべてのコンポーネント用の新しいローカライゼーション実装。
- 新しいパブリックローカライズ API と、併用される新しいリソースを含む igniteui-i18n-resources という名前のパッケージ。
- 新しい Intl 実装を優先して Angular のデフォルトの書式設定を完全にオフにする API を追加しました。それ以外の場合、Angular が使用するロケールが定義されていない場合に Intl が使用されます。
- 古いリソースと API は引き続き動作し、内部的に新しいローカライズを使用している場合でも、動作に変更はありません。