Ignite UI for Angular 21.0がリリースされました!新しくてワクワクする点

開発者が最新のAngularイノベーションを活用しようとする中で、フレームワークの進化に追いつくツールを持つことが不可欠となっています。Ignite UI for Angular 21をすべての新要素に合わせて、エキサイティングな機能と改善をリリースしました。

このリリースにより、Ignite UI for AngularはAngular 21への完全サポートを追加するだけでなく、グリッドフィルタリングのパフォーマンス大幅な改善、新しいグリッドPDFエクスポートツール、AIチャットコンポーネントも導入します。

Ignite UI for Angularに関するもう一つの発表ですが、UIツールセットの一環として、Angular、React、Blazor、Web ComponentsのMITライセンスのもとで50+のオープンソースコンポーネントを提供することで、オープンソースコミュニティを支援します。これは私たちの使命の大きな拡大です。すべての開発者に、あらゆるシナリオに対応した高性能なWebアプリケーションを構築するための、現代的で機能満載かつ将来性のあるツールを提供することです。詳細は「Ignite UIリリース50+ 強力なオープンソースコンポーネント」ブログでご覧いただけます。

詳しく見ていきましょう。

最適化されたフィルタリング性能:新たな基準の樹立

Components: Angular Data Grid, Angular Tree Grid, Angular Hierarchical Grid, Angular Pivot Grid

インフラ整備では、パフォーマンスは単なる目標ではなく、約束です。Ignite UI for Angular 20.1で驚くべきソート最適化を実現した後、私たちはフィルタリング性能に注力しました。大量のデータセットを管理するアプリケーションにおいて、フィルタリング速度は非常に重要であり、私たちは再びその基準を引き上げました。

過去の開発サイクルでは、チームはグリッド横断のExcelスタイルフィルタリングに注力し、100,000+レコードを持つシナリオをターゲットにしてきました。結果はそれを物語っています:

Opening Filter Dialog

• 番号列: 3倍以上速く
• ストリングカラム: 4倍以上速く
• ID列(すべて一意):漸進的だが意味のある改善(~11%速い)

Applying Filter

• 番号列:​ ​9倍以上速い
• ストリングカラム: 5倍以上速く
• ID column: More than 9x faster

これらの改善により、最も要求の高いエンタープライズアプリケーションでも高速なフィルタリングを実現し、よりスムーズで応答性の高いユーザー体験を提供します。

ここで止まるわけではなく、すべてのグリッドの性能基準を再定義する今後の強化Ignite UIご期待ください。

Grid PDF Exporter

​Ignite UI for Angular PDFエクスポーターサービスは、IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGridなどの生データ配列や高度なグリッドコンポーネントを含む様々なソースからPDF形式でデータをエクスポートする強力な機能を提供します。エクスポート機能は theIgxPdfExporterService class にカプセル化されており、マルチページドキュメント対応、自動ページ区切り、カスタマイズ可能な書式設定などの包括的な機能を備えた、シームレスなPDF形式へのデータエクスポートが可能になっています。

主な特徴:

Documentation for Ignite UI for Angular PDF Exporter service.

Angular AI Chat Component

​Ignite UIチャットコンポーネントは、アプリケーション内で会話型インターフェースを構築するための完全なソリューションを提供します。カスタマーサポートツール、共同作業スペース、チャットボットアシスタントのいずれを作る場合でも、チャットコンポーネントは必要な構成要素を提供します。テキストメッセージの送受信、ファイル添付ファイルのアップロード、提案への迅速な返信表示、相手が返信を書いている際の入力表示などです。

静的なメッセージリストとは異なり、Chatコンポーネントはインタラクティブでリアルタイム通信を目的としています。入力、レンダリング、ユーザー操作を管理しつつ、メッセージや添付ファイルの表示方法を完全にコントロールできます。また、レイアウトやビジュアルの任意の部分を上書きできる広範なレンダリングAPIも公開しています。

チャットコンポーネントのドキュメントIgnite UI for Angular。

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

Ignite UI for Angularライブラリは現在、より良い木構造やコード分割のために複数のエントリポイントをサポートしています。メインエントリーポイント「igniteui-angular」はすべての細分エントリーポイントを再エクスポートすることで完全に後方互換性を維持していますが、最適なバンドルサイズを得るために新しいエントリーポイントへの移行を推奨します。

Benefits:

• より良い木の揺らぎ – 未使用の部品がバンドルされない
• コード分割 – 各コンポーネントを別々にレイジーロード可能です
• 小さなバンドルサイズ – 必要なものだけをインポートしてください
• ビルド性能の向上

Ignite UI for Angularコード分割と複数エントリーポイントに関するドキュメント。

Ignite UI for Angular 21.0のCHANGELOGは完全です

テーマ

• IgxButton
  • Breaking Change
    • 以下の影関連パラメータはoutlined-button-themeandflat-button-themeから削除されました:
      • resting-shadow
      • hover-shadow
      • focus-shadow
      • active-shadow

新機能

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

変更点

依存注入リファクタ

• すべての内部DIは現在inject()APIを使いigniteui-angular(ライブラリコードにコンストラクタ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– 共有グリッドインフラストラクチャ(列、ツールバー、フィルタリング、ソートなど)
  • igniteui-angular/grids/grid– 標準グリッド成分(IgxGridComponent)
  • igniteui-angular/grids/tree-grid– 木グリッド成分(IgxTreeGridComponent)
  • igniteui-angular/grids/hierarchical-grid– 階層グリッド成分(IgxHierarchicalGridComponent,IgxRowIslandComponent)
  • igniteui-angular/grids/pivot-grid – Pivot grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

移動:​ng update migrationでは、インポートを新しいエントリポイントに移行するようオプションで促されます。移行しない場合でも、完全な後方互換性を持つメインエントリーを使い続けることができます。

後で手動移行するには:

NG Update igniteUI-angular --migrate-only --from=20.1.0 --to=21.0.0

コンポーネントの移転:

• Input directives (IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective) → igniteui-angular/input-group
• IgxAutocompleteDirective → igniteui-angular/drop-down
• IgxRadioGroupDirective → igniteui-angular/radio

リネームの種類(競合を避けるため):

• Direction → CarouselAnimationDirection (in carousel)

Benefits:

• より良い木の揺らぎ – 未使用の部品がバンドルされない
• コード分割 – 各コンポーネントを別々にレイジーロード可能です
• 小さなバンドルサイズ – 必要なものだけをインポートしてください
• ビルド性能の向上

エントリーポイントの詳細については、Angularパッケージフォーマットのドキュメントをご覧ください。

すべてを包み込むために...

互換性のためにシームレスに作成されたIgnite UI for Angularは、最新のテクノロジとメジャー リリースの力を活用できるライブラリです。最高のAngular UIツールキットと関連する洞察を提供することに尽力し、私たちの目標は、より多くのノウハウ、新機能、パフォーマンスの向上、安定性の向上を提供することです。一部の拡張機能は、Ignite UI for Angular GitHubリポジトリを通じて、あなたのようなユーザーからのリクエストのおかげで追加されました。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく対応します。

詳細については、以下をご覧ください。

• Discordチャンネル
• GitHub ディスカッション
• ロードマップ
• YouTubeチャンネル