インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

トップ > Angular > Ignite UI for Angular 12.2.0 リリースノート

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

Angular Web開発 製品情報
Facebook Twitter Pocket Hatebu

Ignite UI for Angularリリースノート

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

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

はじめに

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

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

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

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

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

新機能

igxGrid、igxHierarchicalGrid、igxTreeGrid

  • IgxGridStateDirective を使用して複数列ヘッダーの状態を復元する機能が追加されました。
  • 各グリッド行にカスタム スタイルを定義できる新しい 'rowStyles' および 'rowClasses' グリッドプロパティが導入されました。
  • CRUD に関連する 2 つの新しいキャンセル可能なイベント (rowDelete および rowAdd) が導入されました。両方のイベントがイベント引数として IGridEditEventArgs オブジェクトを使用します。
<igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
  • 現在のデータ ビューの任意のレコードに行追加の UI を生成する 2 つのパブリック メソッドが追加されました。1 つは UI が生成される行として使用する rowID を受け入れ、もう 1 つは IgxTreeGrid。詳細については、公式ドキュメントを参照してください:  Grid 行追加 および Tree Grid 行追加。

注: 新しいレコードは、エンド ユーザーが送信した後、データ ビューの最後に追加されます。

this.grid.beginAddRowById('ALFKI');             // spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null);                // spawns the add row UI as the first record
this.grid.beginAddRowByIndex(10);               // spawns the add row UI at index 10
this.grid.beginAddRowByIndex(0);                // spawns the add row UI as the first record
this.treeGrid.beginAddRowById('ALFKI', true);   // spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record
  • 列コンポーネントに headerStyles および headerGroupStyles 入力が追加されました。cellStyles と同様に、CSS プロパティをバインドし、グリッド ヘッダーのスタイルを設定する方法を公開します。

igxTreeGrid

  • TreeGridMatchingRecordsOnlyFilteringStrategy が追加されました。これにより、親のトレースなしで、特定のフィルタリング条件に一致するレコードのみを表示できます。

IgxSnackbarComponent

カスタム アニメーションと位置を定義できる新しい 'positionSettings' 入力が導入されました。

IgxToastComponent

カスタム アニメーションと位置を定義できる新しい 'positionSettings' 入力が導入されました。

全般

igxGrid、igxHierarchicalGrid、igxTreeGrid

  • 'oddRowCSS' および 'evenRowCSS' プロパティは非推奨になりました。

列フォーマッタ コールバック署名は、行データを追加の引数として受け取ります:

formatter(value: any, rowData?: any)

rowData 引数はリモート シナリオで定義されていないか、ラベルのフィルタリングにコールバックを適用しているため、その可用性を確認してください。

IgxForOf - 各要素が取るスペースを計算するときにマージンを考慮に入れるようになりました。

注: 仮想化アイテムにマージンが含まれている場合は、可能な限り最良の初期仮想化状態を実現するために、それらを itemSize 値に計算してください。

IgxExcelExporterService

  • Excel で列ヘッダーを固定するサポートが追加されました。デフォルトでは、列ヘッダーは固定されませんが、この動作は IgxExcelExporterOptions オブジェクトの freezeHeaders オプションで制御できます。

サンプル

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

Angular API

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

ナレッジベース

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

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

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