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

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

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

Ignite UI for Angularリリースノート

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

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

はじめに

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

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

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

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

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

新機能

IgxAccordion コンポーネントの追加

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

igxGrid

  • 新しい additionalTemplateContext 列入力:
<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>

IgxGridIgxTreeGridIgxHierarchicalGrid

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

重大な変更

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

変更された動作

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

トランザクション

  • 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 イベントは、以前のページ番号と現在のページ番号に関する情報を提供します。キャンセルはできません。 IgxPageSizeSelectorComponentIgxPageNavigationComponent も導入されました。以下の例に示すように、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 オプションで制御できます。

IgxDateTimeEditorIgxMaskIgxDatePickerIgxTimePickerIgxDateRangePicker

  • 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 インターフェイスへの参照を引数として提供し、IgxToggleDirectiveonOpened および 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
  • 変更された動作 - IgxExpansionPanelHeaderComponentSettings disabled プロパティは、タブ ナビゲーション (tabindex="-1") で基本ヘッダー要素にアクセスできないようになりました。

  • 機能 - パネルのコンテンツがそれぞれ展開または縮小を開始するときに発生する contentExpanding および contentCollapsing イベントが追加されました。両方のイベントをキャンセルして、トグル アニメーションの発生および collapsed プロパティの変更を防止できます。

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

IgxBanner

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

IgxDropDown

  • 重大な変更 - allowItemsFocustrue に設定しない限り、ドロップダウン項目がフォーカスを取得しなくなりました。
  • 重大な変更 - イベントの名前は以下のように変更されました:
    • 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 を初めて使う、という方は是非こちらから

Angular API

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

ナレッジベース

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

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

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