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

Ignite UI for Angularリリースノート

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

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

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

はじめに

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

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

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

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

全般

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

重大な変更 - locale および pipeArgs パラメーターは、IgxNumberSummaryOperand、IgxDateSummaryOperand、IgxCurrencySummaryOperand、IgxPercentSummaryOperand によって公開される Operate メソッドから削除されました。これらは igx-grid-summary-cell テンプレートで設定されます。 igx-grid-summary-cell のロケールおよび書式設定を変更するには、IgxColumnComponent の新しい summaryFormatter プロパティを使用します。
重大な変更 - IgxGrid、IgxTreeGrid、IgxHierarchicalGrid イベントの名前が以下のように変更されました。
- onCellClick -> cellClick
- onScroll -> gridScroll
- onSelection -> selected
- onRowSelectionChange -> rowSelected
- onColumnSelectionChange -> columnSelected
- onColumnPinning -> columnPin
- onColumnInit -> columnInit
- onSortingDone -> sortingDone
- onFilteringDone -> filteringDone
- onPagingDone -> pagingDone
- onRowAdded -> rowAdded
- onRowDeleted -> rowDeleted
- onColumnResized -> columnResized
- onContextMenu -> contextMenu
- onDoubleClick -> doubleClick
- onColumnVisibilityChanged -> columnVisibilityChanged
- onColumnMovingStart -> columnMovingStart
- onColumnMoving -> columnMoving
- onColumnMovingEnd -> columnMovingEnd
- onGridKeydown -> gridKeydown
- onRowDragStart -> rowDragStart
- onRowDragEnd -> rowDragEnd
- onGridCopy -> gridCopy
- onRowToggle -> rowToggle
- onRowPinning -> rowPinning
- onToolbarExporting -> toolbarExporting
- onRangeSelection -> rangeSelected
IgxGridRowComponent、IgxGridGroupByRowComponent、IgxTreeGridRowComponent、IgxHierarchicalRowComponent はパブリック API で公開されません。自動移行は、これらのインポートを RowTypeで変更します。
IgxColumn の DataType データタイプは GridColumnDataTypeに変更されました。

変更された動作

getRowByIndex、getRowByKey、cell.row は、RowType インターフェイスを実装するオブジェクトを返すようになりました。
dragData が IRowDragEndEventArgs で発生します。IRowDragStartEventArgs は RowType です。
IRowDragEndEventArgs、IRowDragStartEventArgs は、ドラッグされた行の HTML 要素を保持する dragElement を発生するようになりました。
IPinRowEventArgs の row が RowType になりました。

IgxTabs、IgxBottomNav

重大な変更 - IgxTabs および IgxBottomNav コンポーネントは、タブヘッダーおよびコンテンツを定義するためのより柔軟で説明的な方法を提供するために完全にリファクタリングされました。既存の igx-tabs および igx-bottom-nav 定義を新しい定義に移行するには、ng update で更新してください。

IgxForOfDirective

重大な変更 - IgxForOfDirective イベントの名前は以下のように変更されました。
- onChunkLoad -> chunkLoad
- onScrollbarVisibilityChanged -> scrollbarVisibilityChanged
- onContentSizeChange -> contentSizeChange
- onDataChanged -> dataChanged
- onBeforeViewDestroyed -> beforeViewDestroyed
- onChunkPreload -> chunkPreload
- onDataChanging -> dataChanging

IgxColumnComponent

重大な変更 - onColumnChange 出力の名前が columnChange に変更されました。

重大な変更 - IgxHierarchicalGrid および IgxRowIsland イベントの名前は以下のように変更されました。
- onGridCreated -> gridCreated
- onGridInitialized -> gridInitialized
- onDataPreLoad -> dataPreLoad

IgxInputGroupComponent

重大な変更 - disabled プロパティが削除されました。入力グループの無効状態を制御するには、基になる IgxInputDirective.disabled を使用します。ng update で更新してテンプレートファイルの disabled を使用してください。詳細についてはアップデートガイドをご覧ください。詳細についてはアップデートガイドをご覧ください。

IgxDateTimeEditor

重大な変更 - onValueChange イベントの名前が valueChange に変更されました。
重大な変更 - isSpinLoop プロパティの名前が spinLoop に変更されました。

IgxDatePicker

重大な変更 - onSelection イベントの名前が valueChange に変更されました。

重大な変更 - igx-date-picker でカスタム要素を定義する新しい方法。以下のプロパティが削除または非推奨になりました: context、labelInternal、template。

    <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="'dd/MM/yyyy'">
        <label igxLabel>Date: </label>
        <igx-picker-toggle igxPrefix>
            calendar_view_day
        </igx-picker-toggle>
        <igx-picker-clear igxSuffix>
            delete
        </igx-picker-clear>
    </igx-date-picker>

重大な変更 - mode と format は inputFormat に置き換えられました。
重大な変更 - placeholder のデフォルト値 inputFormat です。
重大な変更 - editorTabIndex の名前が tabIndex に変更されました。
重大な変更 - monthsViewNumber の名前が displayMonthsCount に変更されました。
重大な変更 - vertical の名前が headerOrientation に変更されました。
重大な変更 - displayData の名前が displayFormat に変更されました。
重大な変更 - dropDownOverlaySettings および modalOverlaySettings は overlaySettings に置き換えられました。
重大な変更 - onValidationFailed イベントの名前が validationFailed に変更されました。
重大な変更 - onDisabledDate イベントが削除されました。
重大な変更 - onOpening、onOpened、onClosing および onClosed イベントの名前がそれぞれ、opening、opened、closing および closed に変更されました。
重大な変更 - igxDatePickerActions の名前が igxPickerActions
変更された動作 - 開くと、フォーカスされた日付は常に選択/バインドされた日付になります。選択された/バインドされた日付がない場合、日付ピッカーは今日の日付をフォーカスします。minValue および/または maxValue が適用され、今日の日付 (またはバインドされた日付) が指定された範囲外である場合、フォーカスされた日付はそれぞれ minValue または maxValue になります。

IgxTimePicker

重大な変更 - value のタイプは Date または string です。
重大な変更 - onValueChanged イベントの名前が valueChange に変更されました。

重大な変更 - igx-time-picker でカスタム要素を定義する新しい方法。以下のプロパティは削除または非推奨: context、promptChar、displayTime、template。

    <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
        <label igxLabel>Time: </label>
        <igx-picker-toggle igxPrefix>
            alarm
        </igx-picker-toggle>
        <igx-picker-clear igxSuffix>
            delete
        </igx-picker-clear>
    </igx-time-picker>

重大な変更 - format は inputFormat に置き換えられました。
重大な変更 - placeholder のデフォルト値は inputFormat です。
重大な変更 - isSpinLoop プロパティの名前が spinLoop に変更されました。
重大な変更 - vertical の名前が headerOrientation に変更されました。
重大な変更 - onOpening、onOpened、onClosing および onClosed イベントの名前がそれぞれ、opening、opened、closing および closed に変更されました。
重大な変更 - onValidationFailed イベントの名前が validationFailed に変更されました。
変更された動作 - ドロップダウン/ダイアログは、設定されている場合は minValue と maxValue の範囲内の時間部分、または提供された inputFormat で 00:00 から 24:00 の間の時間を表示します。各時間部分に表示される値は、常にゼロから始まる項目のデルタに基づいて計算されます。minValue と maxValue が項目のデルタと一致しない場合、表示される値は、しきい値に一致する次の/最後の可能な値から開始/終了します。開くときに、選択した時間がバインドされた値になります。バインドされた値がない場合、最小/最大範囲外にある場合、または項目のデルタと一致しない場合、選択された時間は、項目のデルタに一致する最も近い時間になります。

IgxDateRangePicker

重大な変更 - rangeSelected イベントの名前が valueChange に変更されました。
重大な変更 - onOpening、onOpened、onClosing および onClosed イベントの名前がそれぞれ、opening、opened、closing および closed.
重大な変更 - monthsViewNumber の名前が displayMonthsCount に変更されました。

IgxSliderComponent

重大な変更 - 次の出力の名前が変更されました:
- onValueChange の名前が valueChange に変更されました。
- onValueChanged の名前が dragFinished に変更されました。

IgxCircularProgressBarComponent

重大な変更 - 次の出力の名前が変更されました:
- onProgressChanged の名前が progressChanged に変更されました。

IgxLinearProgressBarComponent

重大な変更 - 次の出力の名前が変更されました:
- onProgressChanged の名前が progressChanged に変更されました。

IgxToast

重大な変更 - 以下の非推奨のメソッドおよび出力は削除されました:
- showing、shown、hiding、hidden の出力の代わりに onOpening、onOpened、onClosing、onClosed を使用してください。
- show、hide メソッドの出力の代わりに open、close を使用してください。

IgxSnackbar

重大な変更 - 以下の非推奨のメソッドは削除されました:
- show、hide の代わりに open、close を使用してください。

新機能

IgxTree コンポーネントの追加

階層データをナビゲーションが簡単な方法で描画できます。コントロールはデータバインドされておらず、宣言的なアプローチを採用しているため、ユーザーは描画されるデータをより詳細に制御できます。
選択 (バイステートおよびカスケード)、ノードのアクティブ化、ノードの展開状態を処理するための API を備えています。
W3 規格に完全に準拠した、豊富で使いやすいキーボードナビゲーションを備えています。
階層データセットから構築されたツリーのコード例:

    <igx-tree>
        <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpanded(node)" [selected]="isNodeSelected(node)">
            {{ node.text }}
            <img [src]="node.image" alt="node.imageAlt" />
            <igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpanded(child)" [selected]="isNodeSelected(child)">
                {{ child.text }}
                <igx-tree-node *ngFor="let leafChild of child.children" [data]="leafChild" [expanded]="isNodeExpanded(leafChild)" [selected]="isNodeSelected(leafChild)">
                    <a igxTreeNodeLink href="{{leafChild.location}}" target="_blank">{{ leafChild.text }}</a>
                </igx-tree-node>
            </igx-tree-node>
        </igx-tree-node>
    </igx-tree>

詳細については、README, 、仕様、および公式ドキュメントを参照してください。

IgxHierarchicalGrid

階層データのエクスポートのサポートが追加されました。

IgxForOf、IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

変更された動作 - 仮想コンテナーは、マウスホイールを使用して水平または垂直にスムーズにスクロールできるようになりました。この動作は、最新のブラウザーでの仮想化されていないコンテナーのスクロール動作に似ています。

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

IgxRowAddTextDirective を使用すると、行追加オーバーレイのテキストをカスタマイズできます。

     <igx-grid [rowEditable]="true">
        <ng-template igxRowAddText>
            Adding Row
        </ng-template>
    </igx-grid>

新しい summaryFormatter 入力プロパティは IgxColumnComponent によって公開され、列の表示された集計値を書式設定するために使用されます。

    public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
        const result = summary.summaryResult;
        if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
            && result !== null && result !== undefined) {
            const pipe = new DatePipe('en-US');
            return pipe.transform(result,'MMM YYYY');
        }
        return result;
    }

    <igx-column field="OrderDate" header="Order Date" [sortable]="true" [disableHiding]="true" [dataType]="'date'" [hasSummary]="true"
        [summaryFormatter]="dateSummaryFormat">
    </igx-column>

dateTime と time の 2 つの新しい列タイプが導入されました。列プロパティ dataType を 'dateTime' または 'time' に設定する必要があります。

<igx-column field="OrderDate" header="Order Date"  [dataType]="'dateTime'" >
</igx-column>
<igx-column field="ClosingTime" header="Closing time"  [dataType]="'time'" >
</igx-column>

変更された動作 - 列の自動サイズ調整機能は、デフォルトの div などのように親に基づいて最初のレベルの子がサイズ変更されるテンプレートヘッダーを処理しません。そのようなヘッダーの自動サイズ変更は変更されません。
変更された動作 - IgxColumnComponent API を介して autosize を呼び出すと、列の minWidth および maxWidth が考慮されるようになりました。
autosizeHeader と呼ばれる新しい IgxColumnComponent 入力プロパティが公開されます。false の場合、自動サイズ設定はヘッダーセルを無視し、コンテンツセルのみに基づいて自動サイズ設定します。

IgxTabs

IgxTabs コンポーネントの tabAlignment プロパティは type プロパティを置き換え、タブの配置を start、center、end、justify に設定できます。igx-tab-header は、ng-content で igx-prefix および igx-suffix ディレクティブをサポートします。

IgxBottomNav

The IgxBottomNav コンポーネントは、選択した項目を切り替えるときにコンテンツをアニメーション化するかどうかを決定する disableAnimations プロパティを公開します。このプロパティはデフォルトで true に設定されています。つまり、アニメーションは無効になっています。

IgxOverlayService

detach および detachAll メソッドが IgxOverlayService に追加されました。detach を呼び出すと、関連するオーバーレイに対して生成されたすべての要素を削除し、関連するすべてのリソースをクリーンアップします。detachAll の呼び出しは、IgxOverlay attach の呼び出しによって生成されたすべての要素を削除し、すべての関連リソースをクリーンアップします。注: hide または hideAll を呼び出してもサービス要素によって生成されたデータはクリーンアップされず、関連リソースもクリーンアップされません。

IgxCombo

IComboItemAdditionEvent.addedItem への変更はデータに追加された項目に反映されます。
IgxComboComponent.onAddition がキャンセル可能になりました。イベント引数の cancel プロパティを true に設定すると、項目が追加されないようにできます。

public handleComboItemAddition(event: IComboItemAdditionEvent): void {
    if (event.addedItem[this.combo.valueKey] === 'ForbiddenValue') {
        event.cancel = true;
    } else if (event.addedItem[this.combo.valueKey] === 'Change Me') {
        const index = this.iter++;
        event.addedItem = {
            [this.combo.valueKey]: `customId${index}`,
            [this.combo.displayKey]: `New item ${index}`;
        }
    }
}

IgxDateTimeEditor

value は文字列形式を受け付けます。
機能 - スピンに使用されるさまざまなデルタ値をユーザーが提供できる spinDelta 入力プロパティ。すべての部分のデフォルト値は 1 です。
increment および decrement メソッドは、現在スピンされている日付部分を対象とするオプションの delta パラメーターを受け取ります。spinDelta で設定された値よりも優先されます。

IgxDatePicker

value は文字列形式を受け付けます。

アクションテンプレートは Calendar コンポーネントを暗黙のコンテキストとして公開します:

<igx-date-picker>
  <ng-template igxPickerActions let-calendar>
      <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
  </ng-template>
</igx-date-picker>

IgxTimePicker

value は文字列形式を受け付けます。

igxPickerActions ディレクティブを使用して、ピッカーのポップアップにカスタムボタンを提供できるようになりました。

<igx-time-picker #timePicker>
  <ng-template igxPickerActions>
      <button igxButton="flat" (click)="timePicker.close()">Close</button>
  </ng-template>
</igx-time-picker>

IgxDateRangePicker

value の開始と終了は ISO 8601 文字列形式を受け付けます。

igxPickerActions ディレクティブを使用して、ピッカーの [完了] ボタンをテンプレート化できるようになりました。

<igx-date-range-picker #rangePicker>
  <ng-template igxPickerActions>
      <button igxButton="flat" (click)="rangePicker.close()">Close</button>
  </ng-template>
</igx-date-range-picker>

テーマ:

重大な変更:
- IgxButton テーマが簡素化されました。テーマのパラメーター (igx-button-theme) の数が大幅に削減され、プレフィックスパラメーター (flat-*、raised-* など) は含まれなくなりました。既存のボタンテーマを更新するには、移行ガイドを参照してください。ng update で実行された更新は既存のボタンテーマを移行しますが、接頭辞付きの params の不在を説明するために追加の調整が必要になる場合があります。
- igx-typography ミックスインは igx-core に暗黙的に含まれなくなりました。タイポグラフィスタイルを使用するには、ミックスインを明示的に含める必要があります。
```
@include igx-core();
/// Example with Indigo Design theme:
@include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale);
```