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

Ignite UI for Angularリリースノート

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

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

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

はじめに

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

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

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

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

新機能

IgxAccordion コンポーネントの追加

ユーザーにデータを提供し、コンパクトにナビゲーションする機能を提供する垂直方向に縮小可能な igx-expansion-panels のコレクション。コントロールはデータバインドされておらず、宣言的なアプローチを採用しているため、ユーザーは描画されるデータをより詳細に制御できます。
展開状態を制御するための公開された API、使いやすいキーボードナビゲーション、ネストアコーディオンのオプション。
コード例:

<igx-accordion>
    <igx-expansion-panel *ngFor="let panel of panels">
       ...
    </igx-expansion-panel>
</igx-accordion>

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

igxGrid

新しい additionalTemplateContext 列入力:

<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

batchEditing の追加 - グリッドに提供されるトランザクションサービスのタイプを制御する Input プロパティ。
<igx-grid [batchEditing]="true"> を設定することは、 [{ provide: IgxGridTransaction, useClass: IgxTransactionService }] を提供することと同じです。
非推奨 - providers: [IgxTransactionService] を介したグリッドへのトランザクションサービスの提供は非推奨になり、将来のパッチで削除される予定です。
代わりに、新しい batchEditing プロパティを使用してグリッドのトランザクションを制御します。

<igx-grid #grid [data]="data" [batchEditing]="true">
    ...
</igx-grid>
<button igxButton (click)="grid.transactions.undo">Undo</button>

重大な変更

IgxGridCellComponent、IgxTreeGridCellComponent、IgxHierarchicalGridCellComponent はパブリック API で公開されなくなりました。新しい IgxGridCell クラスがこれらすべてを置き換えます。上記のパブリック API のみを公開する外観クラスです。自動移行は、IgxGridCell によって実装されるインターフェイスである CellType でこれらのインポートを変更します

変更された動作

getCellByKey、getCellByColumn、getCellByColumnVisibleIndex、ow.cells、column.cells、grid.selectedCells は、IgxGridCell の CellType インターフェイスを返すようになりました。
IGridCellEventArgs の cell が CellType になりました。 IGridCellEventArgs は、cellClick、selected、contextMenu、および doubleClick イベントで発生します。
セルテンプレートの let-cell プロパティが CellType になりました。
getCellByColumnVisibleIndex は非推奨であり、次のメジャーバージョンでは削除される予定です。代わりに getCellByKey、getCellByColumn を使用してください。

トランザクション

IgxFlatTransactionFactory の追加 - シングルトンサービスは、トランザクションタイプを指定して、新しい TransactionService<Transaction, State> をインスタンス化します。
IgxHierarchicalTransactionFactory の追加 - シングルトンサービスは、トランザクションタイプを指定して、新しい HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState> をインスタンス化します。

ツールバー操作

すべての列操作 (非表示 | ピン固定 | 高度なフィルタリング | エクスポーター) の新しい overlaySettings 入力プロパテを公開しました。コード例:

<igx-grid-toolbar-actions>
    <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
    <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>

IgxPaginatorComponent

paging および pagingDone イベントが追加されました。paging イベントはキャンセル可能で、ページネーションが実行される前に発生します。pagingDone イベントは、以前のページ番号と現在のページ番号に関する情報を提供します。キャンセルはできません。 IgxPageSizeSelectorComponent と IgxPageNavigationComponent も導入されました。以下の例に示すように、paginator コンポーネントでカスタムコンテンツを定義できます。

<igx-paginator #paginator>
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()">PREV</button>
        <span>Page {{paginator.page}} of {{paginator.totalPages}}</span>
        <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()">NEXT</button>
    </igx-paginator-content>
</igx-paginator>

Exporters の columnExporting イベントは、エクスポートされたファイルの列のインデックスの変更をサポートします。

    this.excelExporterService.columnExporting.subscribe((col) => {
        if (col.field === 'Index') {
            col.columnIndex = 0;
        }
    });

IgxExcelExporterService

グリッドの複数列ヘッダーを Excel にエクスポートするサポートが追加されました。デフォルトでは、複数列ヘッダーはエクスポートされますが、この動作は IgxExcelExporterOptions オブジェクトの ignoreMultiColumnHeaders オプションで制御できます。

IgxDateTimeEditor、IgxMask、IgxDatePicker、IgxTimePicker、IgxDateRangePicker

IME 入力サポートが追加されました。アジア言語の入力を入力すると、コントロールは入力メソッドの構成と候補リストをコントロールの編集領域に直接表示し、構成が終了するとすぐに周囲のテキストを再フローします。

全般

IgxGridComponent

以下のプロパティは非推奨です:
- paging
- perPage
- page
- totalPages
- isFirstPage
- isLastPage
- pageChange
- perPageChange
- pagingDone
以下のメソッドも非推奨です:
- nextPage()
- previousPage()
重大な変更 - 以下のプロパティが削除されました:
- paginationTemplate

IgxPaginatorComponent

非推奨の selectLabel および prepositionPage プロパティが削除されました。
重大な変更 - 以下のプロパティが削除されました:
- pagerEnabled
- pagerHidden
- dropdownEnabled
- dropdownHidden

IgxSnackbarComponent

非推奨プロパティのメッセージが削除されました。
重大な変更 - snackbarAnimationStarted および snackbarAnimationDone メソッドが削除されました。animationStarted および animationDone イベントは、ToggleViewEventArgs インターフェイスへの参照を引数として提供し、IgxToggleDirective の onOpened および onClosed イベントによって発行されます。

IgxToastComponent

非推奨プロパティのメッセージが削除されました。
重大な変更 - isVisibleChange イベントは、引数として ToggleViewEventArgs インターフェイスへの参照を提供します。

重大な変更 - IgxOverlayService イベントの名前は以下のように変更されました:
- onOpening -> opening
- onOpened -> opened
- onClosing -> closing
- onClosed -> closed
- onAppended -> contentAppended
- onAnimation -> animationStarting

IgxMaskDirective

重大な変更 - 非推奨のプロパティプレースホルダーが削除されました。
重大な変更 - IgxMaskDirective イベントの名前は以下のように変更されました:
- onValueChange -> valueChanged

重大な変更 - IgxBannerComponent イベントの名前は以下のように変更されました:
- onOpening -> opening
- onOpened -> opened
- onClosing -> closing
- onClosed -> closed

IgxExpansionPanelComponent

重大な変更 - IExpansionPanelEventArgs.panel - 非推奨のイベントプロパティパネルが削除されました。パネルへの参照を取得するには、owner プロパティを使用します。
重大な変更 - IgxExpansionPanelComponent イベントの名前は以下のように変更されました:
- onCollapsed -> contentCollapsed
- onExpanded -> contentExpanded
重大な変更 - IgxExpansionPanelHeaderComponent イベントの名前は以下のように変更されました:
- onInteraction -> interaction
変更された動作 - IgxExpansionPanelHeaderComponent の Settings disabled プロパティは、タブナビゲーション (tabindex="-1") で基本ヘッダー要素にアクセスできないようになりました。
機能 - パネルのコンテンツがそれぞれ展開または縮小を開始するときに発生する contentExpanding および contentCollapsing イベントが追加されました。両方のイベントをキャンセルして、トグルアニメーションの発生および collapsed プロパティの変更を防止できます。

    <igx-expansion-panel (contentExpanding)="handleExpandStart($event)" (contentCollapsing)="handleCollapseStart($event)">
        ...
    </igx-expansion-panel>

IgxBanner

BannerEventArgs.banner は非推奨です。バナーへの参照を取得するには、owner プロパティを使用します。

IgxDropDown

重大な変更 - allowItemsFocus を true に設定しない限り、ドロップダウン項目がフォーカスを取得しなくなりました。
重大な変更 - イベントの名前は以下のように変更されました:
- onOpening -> opening
- onOpened -> opened
- onClosing -> closing
- onClosed -> closed
- onSelection -> selectionChanging

IgxToggleDirective

重大な変更 - イベントの名前は以下のように変更されました:
- onOpened -> opened
- onOpening -> opening
- onClosed -> closed
- onClosing -> closing
- onAppended -> appended

IgxCombo

重大な変更 - イベントの名前は以下のように変更されました:
- onSelectionChange -> selectionChanging
- onSearchInput -> searchInputUpdate
- onAddition -> addition
- onDataPreLoad -> dataPreLoad
- onOpening -> opening
- onOpened -> opened
- onClosing -> closing
- onClosed -> closed
opened および closed イベントは IBaseEventArgs で発生します。opening イベントは CancelableBrowserEventArgs で発生します。
重大な変更 - IComboSelectionChangeEventArgs の名前が IComboSelectionChangingEventArgs に変更されました。

IgxSelect

opened および closed イベントは IBaseEventArgs で発生します。opening イベントは CancelableBrowserEventArgs で発生します。
重大な変更 - イベントの名前は以下のように変更されました:
- onOpening -> opening
- onOpened -> opened
- onClosing -> closing
- onClosed -> closed
- onSelection -> selectionChanging

IgxAutocomplete

重大な変更 - イベントの名前は以下のように変更されました:
- onItemSelected -> selectionChanging
重大な変更 - AutocompleteItemSelectionEventArgs の名前が AutocompleteSelectionChangingEventArgs に変更されました。

IgxDialog

重大な変更 - イベントの名前は以下のように変更されました:
- onOpen -> opening
- onOpened -> opened
- onClose -> closing
- onClosed -> closed
- onLeftButtonSelect -> leftButtonSelect
- onRightButtonSelect -> rightButtonSelect

IgxDropDown

opened および closed イベントは IBaseEventArgs で発生します。

テーマ

重大な変更 - igx-action-strip-theme の $color プロパティの名前が以下のように変更されました:
- $color -> $icon-color

サンプル

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

オンラインサンプル

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

Angular API

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

ナレッジベース

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

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

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