Ignite UI for Angular 20.1 がリリースされました!何が新しくてエキサイティングですか?

Ignite UI for Angular 20.1 がリリースされました!何が新しくてエキサイティングですか?

20.1 リリースIgnite UI for Angularリリースされ、多くの新しい機能強化が行われました。セルの結合、両面列のピン留め、グリッドのその他の改善など、強力なアドオンが追加されました。

読書時間7分

コードの複雑さと戦っていますか?さて、Ignite UI for Angular 20.1 リリースは、開発ワークフローとプロセスを合理化し、促進するためのものです。私たちは、まったく新しい機能とパフォーマンスの強化により、Angularグリッドをより適切に機能させるために倍増しました。重複値を排除して読みやすさを向上させるセル結合や、最大限の柔軟性と制御を実現する両面列ピン留めなどの強力なアドオンを使用すると、よりクリーンなデータ表示、最適化されたデータセット、よりスムーズなユーザー エクスペリエンスを提供できます。デバッグではなく、構築に集中します。

ここでは、一目でわかるすべての新機能を紹介します。

グリッドセルマージ機能

Ignite UI for Angularグリッドには、同じ値を持つ 2 つ以上の隣接するセルを 1 つの大きなセルに結合するセル結合機能が用意されています。マージは列内で垂直に適用され、重複する値を減らすことで読みやすさを向上させるのに役立ちます。この機能は、デフォルトで、データ値に一致するか、カスタム条件を適用して、セルをマージするように構成できます。

セルマージ機能は、次の場合に使用できます。

Angular Data Grid

Angular Tree Grid

Angular階層グリッド

Ignite UI for Angular 20.1

両側のグリッド柱ピン留め

Ignite UI for Angular 20.1 では、各列のピン留め位置を個別に指定できるため、グリッドの両側に列をピン留めして、利便性を高め、データセットの最適化を容易にし、Angularアプリケーションに必要な UX を実現できます。

両側の列ピン留めは、データ グリッド、ツリー グリッドAngularおよび階層グリッドAngular Angular使用できます。

Angularグリッドパフォーマンスの限界を押し広げる

インフラジスティックスでは、常に世界最速のAngularグリッドを提供することに誇りを持っており、現在、パフォーマンスを次のレベルに引き上げています。過去数回のスプリントにわたり、開発チームはAngularコンポーネントライブラリのコアであるデータグリッド、ツリーグリッド、階層グリッドの最適化に注力してきました。

これまで以上に高速: 最適化された仕分けパイプライン

Ignite UI for Angular 20.1 でリリースされる最初の重要な改善は、ソート パイプラインの包括的な最適化です。大規模なデータセットを処理するアプリケーションでは、ミリ秒単位が重要であることがわかっています。私たちの当初の受け入れ基準は野心的で、グループ化のパフォーマンスをベンチマークし、10,000行以上のデータセットの実行時間が少なくとも25%改善されることを実証するというものでした。

結果は?私たちはそのベンチマークを突破し、次のことを達成しました。

  • 100,000 レコードを含むデータセットの並べ替えが 3 倍から 4 倍高速化されました。
  • アプリケーションシナリオ内のグリッドでは、100K 行のグリッドで全体的なデータ操作時間が ~35% 短縮されました。

これらの機能強化により、大量のデータを扱う場合でも、アプリケーションの応答性と流動性がこれまで以上に高まります。これは、開発者の継続的な改善への献身と、可能な限り最高のユーザー エクスペリエンスを提供するという情熱の証です。

Ignite UI for Angular 20.1 のこの最新の最適化は、私たちの哲学を明確に示しています。私たちは、機能が豊富であるだけでなく、信じられないほどパフォーマンスの高いツールを開発者に提供するために、さらに一歩踏み出すことを信じています。私たちは、このイノベーションの旅を継続し、Ignite UI for Angularの強化されたパワーで構築する素晴らしいアプリケーションを目の当たりにできることを嬉しく思います。

​Angular 20との互換性

6 月 9 日にリリースされ、Ignite UI for Angular 20.0.0 がリリースされました。

Ignite UI for Angular 20.1.0 の変更ログを完了する

新機能

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
    • 同じデータまたはその他のカスタム条件に基づいて列内のセルを構成し、1 つのセルにマージできる新しいセル結合機能が導入されました。これは、個々の列で有効にできます:<igx-column field="field" [merge]="true"></igx-column>マージは、グリッドレベルで次のいずれかを適用するように設定できます。
      • onSort– 列がソートされたときのみです。
      • always――データ操作に関係なく、常に。
      <igx-grid [cellMergeMode]="'always'"> </igx-grid>The defaultcellMergeMode isonSort。カスタムシナリオで他のマージ条件やロジックが必要な場合に備え、グリッド上でカスタムmergeStrategyを設定することで機能を変更することができます。特定のデータフィールドに対してカスタム処理が必要な場合に備え、個々の列にamergeComparerを設定することも可能です。
    • 特定の側(グリッドの開始または終わり)に個別の列をピン留めできる機能が追加され、両側からピン留めが可能になりました。これは宣言的に、列にpinningPositionプロパティを設定することで行えます:<igx-column [field]="'Col1′" [pinned]='true' [pinningPosition]='pinningPosition'> </igx-column>public pinningPosition = ColumnPinningPosition.End;またはAPIを使えば、オプションのパラメータ:grid.pinColumn('Col1', 0, ColumnPinningPosition.End)を使っています。grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);もし属性pinningPositionが列に設定されていない場合、その列はグリッドのpinningoptions forcolumnsで指定された位置にデフォルトで戻ります。
  • IgxCarousel
    • 追加selectメソッドオーバーロードがインデックスを受け入れています。
    this.carousel.select(2, Direction.NEXT);
  • IgxDateRangePicker
    • これで、カレンダーをカスタマイズするためのプロパティの完全なセットが追加されました。
      • headerOrientation
      • orientation
      • hideHeader
      • activeDate
      • disabledDates
      • specialDates
    • また、カレンダーヘッダーの内容をdialogモードでカスタマイズできる以下のテンプレートも利用可能です。
      • igxCalendarHeader
      • igxCalendarHeaderTitle
      • igxCalendarSubheader
    • 新しいプロパティを追加しました。
      • usePredefinedRanges– 組み込みの事前定義範囲をレンダリングするかどうか
      • customRanges– ユーザーがチップとしてレンダリングしたカスタムレンジを提供できるようにします
      • resourceStrings– ユーザーがリソース文字列のセットを提供できる
    • Behavioral Changes
      • ダイアログにキャンセルボタンを追加し、ユーザーが選択をキャンセルできるようにしました。
      • カレンダーはデフォルトでヘッダーがindialog modeで表示されます。
      • ピッカーはタイピング中(2入力およびdropdownモード)に開いたままです。
      • カレンダーの選択は、入力された値で更新されます。
      • カレンダービューは、入力された値に従って更新されます。
      • ピッカーは、単一入力モードで既定でクリア アイコンを表示します。
    • IgxPredefinedRangesAreaComponent
      • カレンダー内の事前定義またはカスタム範囲をレンダリングするための新しいコンポーネントを追加しました。IgxDateRangePicker
  • IgxDatePicker
    • 同様に、既存のプロパティに加えて以下のプロパティを追加することでカレンダーをカスタマイズする能力も完成しますIgxDateRangePicker:
      • hideHeader
      • orientation
      • activeDate
    • Behavioral Changes
      • カレンダーの選択は、入力された値で更新されます。
      • カレンダービューは、入力された日付値に従って更新されます。
  • IgxOverlay
    • Position Settingsは新しいオプションoffsetinputプロパティをタイプnumber受け入れるようになりました。要素とターゲットのオフセットをピクセル単位で設定するために使われます。
  • IgxTooltip
    • ツールチップは、操作中も開いたままになります。
  • IgxTooltipTarget
    • ツールチップの内容や動作のカスタマイズを強化するために、いくつかの新しいプロパティを導入しました。それらはpositionSettings、hasArrow、sticky、closeButtonTemplateです。詳細な使用例については、ツールチップREADMEを参照してください。

全般

  • IgxDropDown現在、arole inputプロパティを公開し、ユーザーがユースケースに基づいてロール属性をカスタマイズできるようになりました。デフォルトはlistbox。
  • IgxTooltipTarget
    • Behavioral Changes
      • ​showDelayinputプロパティはデフォルトで200となります。
      • ​hideDelayinputプロパティはデフォルトで300となります。
      • ​showTooltipandhideTooltip methodsはshowDelay/hideDelayを考慮していません。
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
    • Sorting improvements
      • Schwartz変換を用いたソートアルゴリズム効率の改善これは、デコレート ソート アンデコレートとも呼ばれる手法で、ソート キーを元のデータ レコードに一時的に関連付けることで、ソート キーの再計算を回避します。
      • 並べ替えアルゴリズムを再帰的から反復的にリファクタリングしました。
    • Groupby の改善
      • グループ化アルゴリズムを再帰的から反復的にリファクタリングしました。
      • 最適化されたグループ化操作。

すべてを包み込むために...

互換性のためにシームレスに作成されたIgnite UI for Angularは、最新のテクノロジとメジャー リリースの力を活用できるライブラリです。最高のAngular UIツールキットと関連する洞察を提供することに尽力し、私たちの目標は、より多くのノウハウ、新機能、パフォーマンスの向上、安定性の向上を提供することです。一部の拡張機能は、Ignite UI for Angular GitHubリポジトリを通じて、あなたのようなユーザーからのリクエストのおかげで追加されました。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく対応します。

詳細については、以下をご覧ください。

製品アップデート Angular
デモを予約