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

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

トップ > UI/UX > Ignite UI for Angular 13.0.0リリース

Ignite UI for Angular 13.0.0リリース

UI/UX Angular 製品情報
Facebook Twitter Pocket Hatebu

f:id:IGJP:20211129173957p:plain

Ignite UI for Angular 13は、12.1と12.2でリリースされた優れたAngularの機能の1年を締めくくるものです。

本稿は、英語記事を機械翻訳したものとなります。

待ちに待った "100パーセントIvy "のAngular 13に、私たちは興奮しています! ご存知のように、Angular Ivyは、Googleが提供する次世代のコンパイルおよびレンダリングパイプラインで、バンドルサイズの縮小、低速ネットワークでの読み込みの高速化、Sassモジュールなどのシンプルな操作性を実現しています。インフラジスティックスでは、お客様に最高のユーザーエクスペリエンスを提供し、フレームワーク、プラットフォーム、テクノロジーの最新バージョンを提供することに努めています。だからこそ、Angular 13に完全対応したIgnite UI for Angular 13.0.0のリリースに含まれているものをご紹介できることを嬉しく思います。

Ignite UI for Angular 13.0.0では、2つの新しい素晴らしいAngularコンポーネントとともにIvyをサポートしています。「Angular Stepper」と「Angular Single Select Combo」です。

Angular 13は、2021年のIgnite UI Angular 12.1および12.2で追加した、PaginatorやAccordionコンポーネントなどの新しいコンポーネントや機能の上に構築されていることを覚えておいてください。

また、Ignite UI for Angularのドキュメントページのナビゲーション構造を更新し、お客様が素早く簡単に操作できるようにしました。

これは、フレームワーク、プラットフォーム、テクノロジーの最新バージョンを常に提供するという私たちの取り組みの一環です。

Ignite UI for Angular 13.0.0 を入手するには、あなたのプロジェクトで ng update igniteui-angular@13.0.0 を実行してください。また、プロジェクトのアップデートに役立つアップデートガイドもご用意しています。

クラウドベースのWYSIWYG IDE + Angular

これらの新しいコンポーネントと、唯一のクラウドベースのドラッグ＆ドロップ式WYSIWYG IDEであるApp Builderを使って、Angularアプリケーションの構築を始めたいとお考えの方は、App Builderのロードマップを確認して、いつツールボックスで利用できるようになるかを確認することができます。

重要なお知らせ。Angular 13ではIE11のサポートが終了するため、Ignite UI for Angular 13.0.0もIE11のサポートを終了します。(※ Chromium Edge の IE モードもサポート対象外となります。) 既存のプロジェクトでまだIE11ユーザーをサポートする必要がある開発者は、Ignite UI for Angularバージョン12を引き続き使用することができます。

Ignite UI for Angular 13の新機能

Angular Stepperコンポーネント

Angular Stepperは、カスタマイズ性の高いコンポーネントで、コンテンツをプロセスとして視覚化し、連続したステップに分割してその進行状況を表示します。垂直または水平の線で表示されます。Ignite UI for Angularライブラリによって提供されるStepperコンポーネントは、ウィザードのようなワークフローと、ステップの検証、スタイリング、向き、キーボードナビゲーションなどの複数の機能を提供します。

f:id:IGJP:20211130135010j:plain

Angular Single Selection Combo コンポーネント

Angular Single Selection Comboコンポーネントは、Ignite UI for Angular GitHubでお客様からご要望のあったComboBoxコンポーネントを改良し、単一の選択を可能にしたものです。Single Selection Comboは、あらかじめ定義された項目のリストからユーザーが選択肢を選ぶことができる編集可能な入力です。この新しいコンポーネントは、フィルタリング機能、項目の選択、グループ化、ドロップダウンリストへのカスタム値の追加も可能です。HTMLのselectタグの代替として使用することができ、データバインディング（ローカルおよびリモート）、フィルタリング、グループ化、カスタムテンプレート、カスタム値など、いくつかのすぐに使える機能を備えています。

f:id:IGJP:20211129181319g:plain

以下は、Ignite UI for Angular 13.0.0の変更履歴です

新機能

  • IgxStepper コンポーネントの追加

    • カスタマイズ性の高いコンポーネントで、コンテンツをプロセスとして視覚化し、コンテンツを時系列的なigx-stepに分割してその進捗を表示する。
    • APIを公開し、ステップ検証、スタイリング、向き、使いやすいキーボードナビゲーションなどの機能を制御。
    • 以下がコードサンプルです:
    <igx-stepper>
    <igx-step *ngFor="let step of stepsData" >
        ...
    </igx-step>
</igx-stepper>

  • IgxFocusTrap 指令を追加しました。これは、Tab キーのフォーカスを要素内でトラップします。

    <div #wrapper [igxFocusTrap]="true" tabindex="0">
    <input type="text" placeholder="Enter Username" name="uname">
    <input type="password" placeholder="Enter Password" name="psw">
    <button>SIGN IN</button>
</div>

  • IgxSimpleComboComponentを追加しました。

    • igx-simple-combo は、単一の選択を可能にする igx-combo コンポーネントを改良したもので、そのための適切な UI と動作を備えています。igx-comboのAPIのほとんどを継承しています。
    • フィルタリング可能なリスト内の単一アイテムの選択を可能にします。
    • カスタム値、キーボードナビゲーション、検証、オーバーレイ設定によるアイテムリストのカスタマイズをサポートします。
    • 例:
    <igx-simple-combo [(ngModel)]="item" [allowCustomValues]="true" [placeholder]="'Search'" [data]="items">
    <label igxLabel>Items</label>
    <igx-hint>Please select an item from the dropdown list.</igx-hint>
</igx-simple-combo>

  • IgxCsvExporterService, IgxExcelExporterService

    • エクスポーターサービスは、ルートレベルで注入されるようになったため、アプリケーション内で提供する必要がなくなりました。

  • IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent

    • ツールバーのドロップダウンボタンの中に表示されるテキストを設定する新しい入力buttonTextを公開しました。

  • IgxCombo

    • groupSortingDirection入力が追加され、グループのソート順を設定できるようになりました。

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • ヘッダーソートインジケーターを再テンプレート化するための新しいディレクティブ - IgxSortHeaderIconDirective、IgxSortAscendingHeaderIconDirective、IgxSortDescendingHeaderIconDirective - を追加しました。

  • IgxGrid

    • sortStrategy と同様に機能する groupStrategy 入力を公開し、グリッドのグループ化の動作をカスタマイズできるようにしました。詳細については、「Group By」のトピックを参照してください。

  • IgxDialog

    • ダイアログを開いたときにTabキーのフォーカスをダイアログ内にトラップするかどうかを設定する focusTrap 入力を追加しました。デフォルトはtrueです。

一般

  • IEのサポート終了 Breaking Changeの詳細

    • web-animations-jsがPeer Dependencyとして削除されました。
    • .browserslistrcからIEを削除しました。
    • IE関連のポリフィルを削除しました。例えば、IE用のImporting ES7 polyfill for Object ('core-js/es7/object')は使用されなくなりました。

  • IgxDialog

    • ブレイキング・チェンジ- デフォルトのpositionSettingsの開閉アニメーションが、fadeIn/fadeOutに変更されました。開閉アニメーションはポジション設定で設定することができます。例えば、以前のデフォルトの開閉アニメーションに変更することができます。
    import { slideInBottom, slideOutTop } from 'igniteui-angular';

@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
public newPositionSettings: PositionSettings = {
    openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
    closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} })
};
this.alert.positionSettings = this.newPositionSettings;

  • igxGrid, igxHierarchicalGrid, igxTreeGrid

    • ブレイキング・チェンジ - 以下の非推奨の入力が削除されました。
      • Inputs showToolbar, toolbarTitle, columnHiding, columnHidingTitle, hiddenColumnsText, columnPinning, columnPinningTitle, pinnedColumnsText. Use IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent instead.
    • ブレイキング・チェンジ - rowSelectedイベントの名称がrowSelectionChangingに変更され、その機能がより反映されるようになりました。
    • ブレイキング・チェンジe - columnSelectedイベントの名称がcolumnSelectionChangingに変更され、その機能がより明確に反映されるようになりました。
    • ブレイキング・チェンジ - columnsCollectionが削除されました。代わりにcolumnsを使用します。もしcolumnsが空の配列を返すことがあったら、ViewChildrenを使ってカラムを問い合わせ、ngAfterViewInitでそれらにアクセスしてください。
    @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
public columns: QueryList<IgxColumnComponent>;
    • RowType, IgxRowDirective
      • ブレイキング・チェンジ - rowDataとrowIDの非推奨プロパティが削除されました。代わりに data と key を使用してください。自動移行には ng update を使用してください。
    • igxRowSelector
      • igxRowSelector のコンテキスト・オブジェクトの rowID は現在非推奨となっており、将来のバージョンでは削除される予定です。代わりに key プロパティを使用してください。
      <igx-grid [data]="data", [rowSelection]="'multiple'" primaryKey="ID">
    <igx-column field="Name"></igx-column>
    <igx-column field="Age"></igx-column>

    <ng-template igxRowSelector let-rowContext>
        <span>{{ rowContext.key }}</span>
    </ng-template>
</igx-grid>
    • IgxColumnActionsComponent
      • ブレイキング・チェンジ - 入力カラムが削除されました。代わりにigxGridのカラム入力を使用してください。

  • IgxCarousel

    • ブレイキング・チェンジ - カルーセルのアニメーションタイプCarouselAnimationTypeの名称がHorizontalAnimationTypeに変更されました。

  • Theming

    • ブレイキング・チェンジ - CSSのパレット変数をHEX値からH、S、Lのカンマ区切りのリストに変更し、これらの値に直接アクセスする際にCSSのhsl関数を使用するようにしました。 
      .bozo {
    background: hsl(var(--igx-surface-500));
}

まとめ

私たちは、お客様に最高のAngular UIツールキットを提供し、最高のアプリビルダー・プラットフォームであるIndigo.Designを開発することをお約束し、新機能、パフォーマンス、安定性の向上を段階的に提供し続けています。先に述べたように、私たちの機能強化の一部は、GitHubリポジトリを通じてあなたのようなユーザーから提供されています。このことを念頭に置き、私たちは常に提案やフィードバックを受け付けています。最後になりましたが、私たちは、次の目標を予測し可視化することが、良きビジネスパートナーにとって重要であると考えており、ロードマップを常に更新しています。

オリジナル記事

Ignite UI for Angular 13.0.0 Release
https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-13-0-0-release