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

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

トップ > Angular > Ignite UI for Angular 9.0.0リリースノート

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

Angular Web開発 製品情報
Facebook Twitter Pocket Hatebu

Ignite UI for Angularリリースノート

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

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

はじめに

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

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

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

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

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

重大な変更、その他:

  • Ivy レンダラーのサポートが追加されました。
  • 重大な変更: 以下のクラスと列挙子の名前が変更されました。ng update を使用すると、新しい名前を使用するようプロジェクトが自動的に移行されます。
    • IgxDropDownBase -> IgxDropDownBaseDirective
    • IgxDropDownItemBase -> IgxDropDownItemBaseDirective
    • IgxGridBaseComponent -> IgxGridBaseDirective
    • IgxRowComponent -> IgxRowDirective
    • IgxHierarchicalGridBaseComponent -> IgxHierarchicalGridBaseDirective
    • IgxMonthPickerBase -> IgxMonthPickerBaseDirective
    • AvatarType -> IgxAvatarType
    • Size -> IgxAvatarSize
    • Type -> IgxBadgeType
    • SliderType -> IgxSliderType
    • TabsType -> IgxTabsType
  • 重大な変更: Ivy を使用した Angular 9 の重大な変更により、Hammer プロバイダーはデフォルトで含まれなくなりました。詳細については、重要な変更 (英語)を参照してください。この変更のため、次のコンポーネントでは、ユーザーインタラクションが適切に機能するように、HammerModule をアプリケーションのルート モジュールにインポートする必要があります。
  • igxGrid
  • igxHierarchicalGrid
  • igxTreeGrid
  • igxList
  • igxNavigationDrawer
  • igxTimePicker
  • igxMonthPicker
  • igxSlider
  • igxCalendar
  • igxDatePicker
  • igxCarousel
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
    • 重大な変更: 階層グリッドの子は同じ IgxTransactionService
      • インスタンスを使用しなくなったため、各グリッドのトランザクションに個別に対応するためにトランザクション処理を変更する必要があります。
    • 動作の変更 - 固定領域がグリッドのサイズを超える場合、列の固定が自動的に防止されなくなりました。
    • 重大な変更: 以下の入力および出力は igxHierarchicalGrid で非推奨になり、今後のバージョンで削除される予定です。
      • hierarchicalState -> expansionStates を代わりに使用してください。
      • hierarchicalStateChange -> expansionStatesChange を代わりに使用してください。
    • 開発者がグリッドの状態を簡単に保存および復元できるように、igxGridState ディレクティブが追加されました。このディレクティブは、状態を保存/復元する getState メソッドと setState メソッドを公開し、機能を除外するオプション入力プロパティを公開します。
  • IgxCarousel:
    • 重大な変更: カルーセル スライドは配列ではなく、QueryList に変更されました。
    • 動作の変更: 5 スライドを超える場合、インジケーターの代わりにラベルが表示されます。 表示されるインジケーターのカウント制限は、入力の maximumIndicatorsCount で変更できます。
  • IgxAvatar:
    • 重大な変更: IgxAvatarType でデフォルトの列挙メンバーをカスタムに変更しました。
  • IgxBadge:
    • 重大な変更: IgxBadgeType でデフォルトの列挙メンバーの名前をプライマリに変更。
  • IgxCard:
    • 重大な変更: 重大な変更: デフォルトの列挙メンバーの名前を IgxCardType で elevated に変更。
  • IgxCard:
    • 重大な変更: 重大な変更: デフォルトの列挙メンバーの名前を IgxCardType で elevated に変更。
    • 重大な変更: デフォルトの列挙メンバーの名前を IgxCardActionsLayout で start に変更。
  • IgxDivider:
    • 重大な変更: IgxDividerType でデフォルトの列挙メンバーを solid に変更。
    • 重大な変更: isDefault ゲッターの名前を isSolid に変更。
  • IgxProgress:
    • 重大な変更: isDefault ゲッターの名前を isSolid に変更。
  • IgxProgressType;
    • 重大な変更: danger ゲッターの名前を error に変更。
  • IgxTabs:
    • 重大な変更: tabsType 入力プロパティの名前が type に変更されました。ng update を使用してコンポーネントの名前を変更する必要があります。
  • igxOverlay:
    • 動作の変更: igxOverlay: ボックスから要素をスクロールし続けることはなくなりました。 要素をオーバーレイにアタッチした後、要素のスクロール位置を保持するには、公開された onAppended オーバーレイ イベントを処理し、スクロール位置を管理/復元します。

新機能

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid:
    • igxGrid に Master-Detail の可視化機能が追加されました。ユーザーは、展開時に行の追加コンテキストを表示するテンプレートを定義できるようになりました。詳細については、Angular サンプルをご覧ください。
    • sortStrategy 入力が追加され、グリッド全体のグローバル ソート ストラテジを設定するために使用できます。 (注: グリッドの sortStrategy は、列の sortStrategy とは異なるタイプです。)
    • NoopSortingStrategy が追加されます。これは、インスタンスをグリッドの sortStrategy 入力に割り当てることにより、グリッドのデフォルトのソートを無効にするために使用できます。(リモート ソートに利用できます。)
    • NoopSortingStrategy が追加されます。これは、インスタンスをグリッドの filterStrategy 入力に割り当てることにより、グリッドのデフォルトのソートを無効にするために使用できます。(リモート ソートに利用できます。)
    • sortExpressionsChange イベント エミッターが追加されます。これは、ソート式が変更されるたびに (実際のソートを実行する前に) 起動されます。
    • filteringExpressionsTreeChange イベント エミッターが追加されます。これは、フィルタリング式に変更が発生するたびに (実際のフィルタリングを実行する前に) 起動されます。
    • filteringExpressionsTreeChange イベント エミッタが追加されます。これは、フィルタリング式に変更が発生するたびに (実際のフィルタリングを実行する前に) 起動されます。
    • 折りたたみ可能なプロパティと展開されたプロパティが IgxColumnGroupComponent に追加されます。 collapsible プロパティは、特定の列グループが折りたたみ可能であることを識別します。expanded は、グループが最初に展開されるか折りたたまれるかを識別します。
    • collapsibleChange イベントと expandedChange イベントが IgxColumnGroupComponent に追加され、collapsible プロパティと expand プロパティがそれに応じて変更されるたびに発行されます。
    • visibleWhenCollapsed プロパティが IgxColumnComponent に追加されました。親が折りたたまれたときに列を表示したままにするかどうかを設定できます。
    • visibleWhenCollapsedChange イベントは、visibleWhenCollapsed プロパティが変更されるたびに発行される IgxColumnComponent に追加されます。
    • collapsibleIndicatorTemplate プロパティが IgxColumnGroupComponent に導入されました。これにより、展開折りたたみインジケーターのカスタム テンプレートを設定できます。
    • collapsibleIndicatorTemplate プロパティが IgxColumnGroupComponent に導入されました。これにより、展開折りたたみインジケーターのカスタム テンプレートを設定できます。
    • IgxGridExcelStyleFilteringComponent および IgxAdvancedFilteringDialogComponent は、組み込みのフィルタリング UI と同じエクスペリエンスを提供するために、グリッドの外部でホストできるようになりました。
    • expandRow(rowID)/collapseRow(rowID)/toggleRow(rowID) API メソッドが igxHierarchicalGrid に追加されました。ID で行を展開/折りたたみできます。
    • onRowToggle イベントが igxHierarchicalGrid に追加されました。行の展開状態が変更されたときに発行されます。
    • IgxOverlayService:
      • setOffset メソッドが追加されました。指定された量だけ、対応する軸に沿ってコンテンツをオフセットします。
    • IgxRowDragGhost ディレクティブが追加されました。行をドラッグするときにドラッグ ゴーストのカスタム テンプレートを提供できます。

      f:id:Loc_IG:20200212200226p:plain

    • IgxSlider:
      • primaryTicks 入力が追加されました。primaryTicks の数を設定します。
      • secondaryTicks 入力が追加されました。secondaryTicks の数を設定します。
      • showTicks 入力が追加されました。すべてのスライダーの目盛りと目盛りラベルを表示/非表示にします。
      • primaryTickLabels 入力が追加されました。すべてのprimaryTickLabels を表示/非表示します。
      • secondaryTickLabels 入力が追加されました。すべての secondaryTickLabels を表示/非表示します。
      • ticksOrientation 入力が追加されました。ティックの方向を top | bottom | mirror に変更できます。
      • tickLabelsOrientation 入力が追加されました。すべての目盛りラベルの回転を水平から垂直 (toptobottom, bottomtotop) に変更できます。
      • igxSliderTickLabel ディレクティブが導入されました。すべての目盛りラベルにカスタム テンプレートを設定できます。
      • isContinuous 入力が削除されました。このオプションはサポートされなくなりました。
      • onValueChanged 新しい出力が公開されました。このイベントは、各スライド操作の終了時に発生します。
      • IgxCarousel:
        • keyboardSupport 入力が追加されます。これは、キーボード ナビゲーションを有効または無効にするために使用できます。
        • [gesturesSupport] 入力が追加され、ジェスチャを有効または無効にするために使用できます。
        • maximumIndicatorsCount 入力が追加され、表示可能なインジケーターの数を設定するために使用できます。
        • indicatorOrientation 入力が追加され、これを使用してインジケータの位置を設定できます。
        • animationType 入力が追加され、スライドを変更するときにアニメーションを設定するために使用できます。
        • indicatorTemplate ディレクティブが追加され、カルーセルのカスタム インジケーターを提供するために使用できます。このプロパティが提供されない場合、代わりにデフォルトのインジケーター テンプレートが使用されます。
        • nextButtonTemplate ディレクティブが追加され、カスタムの [次へ] ボタン テンプレートを提供するために使用されます。指定しない場合、デフォルトの [次へ] ボタンが使用されます。
        • prevButtonTemplate ディレクティブが追加されます。これは、カスタムの [戻る] ボタン テンプレートを提供するために使用されます。指定しない場合、デフォルトの [戻る] ボタンが使用されます。
        • IgxSelect:
          • IgxSelectHeaderDirective および IgxSelectFooterDirective を追加します。これらは、igxSelect ドロップダウン リストのカスタム ヘッダーまたはフッター テンプレートを提供します。また、ディレクティブでマークされたテンプレートがない場合、デフォルトのテンプレートは使用されないため、ドロップダウンリストにはヘッダーもフッターもありません。
        • IgxCombo:
          • コンボの onSelectionChange イベント引数に displayText プロパティを追加しました。プロパティには、選択が完了した後にコンボのテキストボックスに入力されるテキストが含まれます。このテキストは、カスタムメッセージを表示するために上書きできます。 (例: 3 つのアイテムが選択されました。)

            f:id:Loc_IG:20200212200142p:plain

        • IgxDropDown:
          • clearSelection メソッドが追加され、選択したドロップダウン項目の選択を解除するために使用できます。
        • IgxCircularProgressBar:
          • IgCProgressBarGradientDirective を追加して、カスタムの循環進行 SVG グラデーションを提供できるようにしました。テンプレートを介したカスタムグラデーションの提供がコーディング同様に簡単になりました。f:id:Loc_IG:20200212200119p:plain
          • igx-progress-circular-theme を変更して、$progress-circle-color 引数に 2 色のリストを受け入れ、デフォルトのグラデーションが簡単に変更できるようになりました。

            f:id:Loc_IG:20200212200032p:plain

          • RTL サポート
        • IgxForOf
          • IgxForTotalItemCount 入力は、データがリモート サービスからのものである場合に追加されます。 これにより、テンプレートを介してアイテムの数を設定できます。また、このオプションに AsyncPipe を使用することができます。f:id:Loc_IG:20200212195954p:plain

        サンプル

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

        Angular API

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

        ナレッジベース

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

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

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