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

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

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

Ignite UI for Angularリリースノート

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

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

はじめに

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

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

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

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

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

新機能

  • igxGrid - 新しい入力プロパティを公開:
    • グリッド テンプレートのパラメーターに、コンテキストの型が追加されました。これは、アプリが厳密なテンプレート モードであり、間違った型を使用している場合にも問題を引き起こす可能性があります。変換が必要なテンプレートへの参照:
      • IgxColumnComponent - ColumnType (igxFilterCellTemplate の column パラメーターなど)
      • IgxGridCell - CellType (igxCell テンプレートの cell パラメーターなど)
    • excelStyleHeaderIconTemplate - Excel スタイルのヘッダー アイコンを取得または設定します。
    • groupRowTemplate - グループ行のテンプレート参照を取得または設定します。
    • headSelectorTemplate - ヘッダー行セレクター テンプレートを取得または設定します。
    • rowSelectorTemplate - 行セレクターに使用されるカスタム テンプレートを取得または設定します。
    • groupByRowSelectorTemplate - グループ行セレクターに使用されるカスタム テンプレートを取得または設定します。
    • sortHeaderIconTemplate - 列がソートされていない場合に、ヘッダーのソート インジケーターを描画するときに使用するカスタム テンプレートを取得または設定します。
    • sortAscendingHeaderIconTemplate - 列が昇順でソートされている場合に、ヘッダーのソート インジケーターを描画するときに使用するカスタム テンプレートを取得または設定します。
    • sortDescendingHeaderIconTemplate - 列が降順でソートされている場合に、ヘッダーのソート インジケーターを描画するときに使用するカスタム テンプレートを取得または設定します。
    • rowEditActionsTemplate - 行編集アクション テンプレートを取得または設定します。
    • rowAddTextTemplate - 行追加テキスト テンプレートを取得または設定します。
    • rowEditTextTemplate - 行編集テキスト テンプレートを取得または設定します。
    • dragGhostCustomTemplate - 行のドラッグに使用されるカスタム テンプレートを取得または設定します。
    • dragIndicatorIconTemplate - 行ドラッグ インジケーターに使用されるカスタム テンプレートを取得または設定します。
    • detailTemplate - マスター / 詳細テンプレートを取得または設定します。
  • IgxGridToolbar
    • 重大な変更 - IgxGridToolbarTitleDirectiveIgxGridToolbarActionsDirective はコンポーネントに変換され、要素セレクターのみが保持されます。<igx-grid-toolbar-title> および <igx-grid-toolbar-actions> の優先要素マークアップを使用するアプリの場合、機能的な変更はありません。他の要素で igxGridToolbarTitle および igxGridToolbarActions ディレクティブを使用するアプリは、代わりにそれらを前述の要素に変換する必要があります。
    • 動作の変更 - 一括編集を有効にしてグリッドに新しい行を追加すると、rowChangesCount は定義された列の数を表示します。
  • IgxGridIgxTreeGridIgxHierarchicalGrid
    • 動作の変更 - 行を編集すると、rowChangesCounthiddenColumnsCount が表示されます。
    • 動作の変更 - データがない場合やすべての列が非表示の場合に、Grid Paginator コンポーネントが非表示になることはなくなりました。
  • IgxExcelExporterService
    • Grid 集計のエクスポートのサポートが追加されました。
    • currency タイプの列は、グリッドのロケールに基づいて、Excel で通貨として書式設定されます。USDEURGBPCNYJPY 以外のロケール通貨では、代わりに列が数値としてエクスポートされます。
  • IgxGridIgxTreeGridIgxHierarchicalGridIgxPivotGrid
    • Image 列のデータ型の追加
  • IgxCalendar

    Shift キー + マウス クリックのインタラクションのサポートが追加されました。

    • multi モード - 最後に選択 / 選択解除された日付と、Shift キーを押しながらクリックされた日付の間のすべての日付を選択 / 選択解除します。
    • range モード - 最後に選択した日付から、Shift キーを押しながらクリックした日付までの範囲を拡張 / 短縮します。

    サンプル

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

    Angular API

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

    ナレッジベース

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

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

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