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

Ignite UI for Angularリリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーションのデニです。Ignite UI for Angular 14.1.0 リリースいたしました。本リリースでは、新機能が含まれています。詳細は以下をご覧ください。

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

はじめに
- Ignite UI for Angular のバージョニング
Ignite UI for Angular 14.1.0 リリースノート
新機能
サンプル
Angular API
ナレッジベース

はじめに

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

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

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

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

新機能

IgxCombo および IgxSimpleComboComponent
- filterFunction 入力が追加されました。新しいプロパティにより、コンボでのフィルタリング方法を変更できます。デフォルトでは、コンボのデータがプリミティブ値のコレクションである場合、コンボのデータの値に対して、またはコンボの displayKey で定義された値に対してフィルタリングが行われます。カスタムフィルタリング関数が提供されている場合、提供されている関数で指定されたとおりにフィルタリングが行われます。
- filteringOptions が拡張され、filterable および filteringKey プロパティが含まれるようになりました。filterable を設定することで、コンボがフィルタリング可能かどうかを指定できます。デフォルトでは、データ値がプリミティブの場合はデータ値に対して、または displayKey に等しい値のフィールドに対してフィルタリングが行われます。filteringKey を使用すると、データに関連する任意のキーでデータをフィルタリングできます。
igxPivotGrid
- ピボット値チップコンテンツをテンプレート化するオプションを追加します:
```
<ng-template igxPivotValueChip let-value>
        {{ value.member }}
</ng-template>
```
- pivotConfiguration の状態を保持するため、igxGridState 使用のサポートを pivotConfiguration のオプションに追加しました。
```
 <igx-pivot-grid
        #grid1
        [igxGridState]="options" ...
```
```
    public options : IGridStateOptions = {
    pivotConfiguration: true
};
```
igxGridState ディレクティブの既知の問題の 1 つは、状態が文字列として保存されるため、関数を保存できないことです。
その結果、memberFunction、aggregator、formatter、styles などに設定されたカスタム関数は保存されません。これらの復元は、アプリケーションレベルのコードで実現できます。
そのために、2 つの新しいイベントも公開しました:
- dimensionInit - 構成からのディメンションが初期化されるときに発行されます。
- valueInit - 構成からの値が初期化されてるときに発行されます。
これは、構成にあるカスタム関数を元に戻すために使用できます。
IgxPivotNumericAggregate、IgxPivotDateAggregate などのデフォルトのアグリゲーター関数は、そのまま復元されます。ただし、カスタムアグリゲーター (またはその他のカスタム関数) がある場合は、 valueInit イベントで元に戻す必要があります。次に例を示します。
```
    public onValueInit(value: IPivotValue) {
    if (value.member === 'AmountOfSale') {
        value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
    }
}
```
memberFunction など、ディメンションのカスタム関数にも同じことが当てはまります。カスタム関数は、dimensionInit イベントで元に戻すことができます:
```
 public onDimensionInit(dim: IPivotDimension) {
    if (dim.memberName === 'AllCities') {
        dim.memberFunction = () => 'All';
    }
}
```
- igxGridState:
  状態ディレクティブに stateParsed イベントを公開し、グリッドに状態が適用される前に状態を追加で変更できるようにしました。
```
this.state.stateParsed.subscribe(parsedState => {
        parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
    });
```
igxGrid
- グリッド編集用の組み込みの検証メカニズムが追加されました。Angular Form 検証機能の拡張
  2 つの方法で検証機能を実装できます:
  1. グリッドの igx-column でテンプレート駆動の構成を介して:
```
<igx-column required minlength="4" ...>
```
  2. グリッドの formGroupCreated イベントを介して公開された FormGroup を使用するリアクティブフォームを介して:
```
<igx-grid (formGroupCreated)='formCreateHandler($event)' ...>
```
```
public formCreateHandler(formGr: FormGroup) {
    // add a validator
    const prodName = formGr.get('UserName');
    prodName.addValidators(forbiddenNameValidator(/bob/i))
}
```
  検証が失敗すると、編集されたセルは無効な状態になり、エラーアイコンとメッセージが表示されます。値が有効な値に編集されるか、検証サービスの状態がクリアされるまで、セルは無効のままです。
  
  詳細については、ドキュメントを参照してください: https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation
- width auto を設定することにより、初期化時にセルとヘッダーの内容に合わせて列のサイズを自動調整する機能が追加されました。
```
<column width='auto' ...>
```
- IgxGridStateDirective のカスタムフィルタリングオペランドを使用してフィルタリング式を復元するためのサポートが追加されました。
IgcFormControl ディレクティブが追加されました。IgcFormsModule とともにインポートすることで Ignite UI for WebComponents パッケージをフォームコンポーネントにシームレスにアタッチするように設計されており、ngModel および formControlName ディレクティブをサポートし、 Angular テンプレートおよびリアクティブフォームから使用できるようになりました。現在、このディレクティブを介してサポートされている Web コンポーネントは igc-rating のみです。

サンプル

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

オンラインサンプル

jp.infragistics.com
トライアルの開始

Angular API

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

ナレッジベース

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

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

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