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

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

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

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

Angular Web開発 製品情報 リリースノート

Ignite UI for Angularリリースノート

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

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

はじめに

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

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

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

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(*): clearHighlight() に null チェックを追加し、早期破棄に対するテストを追加しました (#16672)。
  • fix(igxGrid): 未統合行と統合済み行のクラスおよびボーダーが一致するようにしました (#16334)。
  • fix(IgxGrid): 統合処理でスキップされる特別なレコードタイプに、集計行を追加しました (#16370)。
  • fix(igxGrid): 統合グループが部分的に重なる場合の未統合処理を修正しました (#16362)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(tooltip): ネストされたツールチップでも矢印が表示されるよう修正しました (#16609)。
  • fix(grid): グリッド セル内の入力に切り込み境界が表示される問題を修正しました (#16628)。
  • fix(tabs): タブ コンテンツの配置がずれる問題を修正しました (#16637)。
  • fix(button): requestAnimationFrame の代わりに animationFrameScheduler を使用するようにしました (#16643)。
  • fix(slider): flex-grow を削除しました (#16630)。
  • fix(grid): 列がサイズ キャッシュを計算する際に、制約を一箇所で適用するようにしました (#16636)。
  • fix(ci): マトリクス実行時の Node バージョン設定を修正しました (#16633)。
  • cherry-pick: PR #16618 (カレンダーの日付スタイルおよびフォーマットの修正) を取り込みました (#16646)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • refactor(button): ボタンのテーマをリファクタリングしました (#16513)。
  • refactor(grid): Bootstrap の配色を改善しました (#16545)。
  • fix(grid): グリッド セルの入力スタイル上書きを修正しました (#16515)。
  • fix(i18n): カレンダーのリソース文字列を複数言語で更新しました (#16529)。
  • fix(stepper): ステップ セパレーターのスタイルを修正しました (#16560)。
  • fix(list): リストのスタイル不整合を修正しました (#16567)。
  • chore(schematics): 公式バージョンに合わせて更新しました (#16588)。
  • CSV: 利用可能な場合は常に列ヘッダーを出力するようにしました (#16596)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(grid): データおよび列ヘッダーが存在しないグリッドにフォーカスした際に発生する null TypeError を修正しました (#16521)。
  • fix(calendar): Material および Indigo テーマのスタイルを Web Components に一致するように修正しました (#16371)。
  • fix(igxGrid): アクティブ ターゲットが未統合レコードの場合にチェックを追加しました (#16538)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(pivot-grid): ピボット行セルの値取得に dataMapper を使用しないように修正しました (#16448)。
  • fix(drp): getEditElement() の戻り値を基本定義に合わせました (#16439)。
  • fix(themes): コンポーネント プロパティを shadow の代わりに elevation 変数を使用するよう更新しました (#16460)。
  • fix(tabs): Web Components デモで igx-icon を igc-icon に置き換え、テーマ パラメーターを修正しました (#16416)。
  • ページネーターは明示的に追加された場合にのみ接続されるようにしました (#16248)。
  • fix(tabs): 追加のスタイリング修正を行いました (#16480)。
  • cellEdit がキャンセルされ、editMode が false の場合でもナビゲーション状態を維持するようにしました (#16393)。
  • docs(performance): パフォーマンス プロジェクトに README を追加しました (#16252)。
  • feat(grid): セル コンテキスト内での input 要素のスタイル設定機能を追加しました (#16475)。
  • fix(radio): Sass テーマを使用してコンポーネントのスタイルを設定するように修正しました (#16473)。
  • fix(samples): DatePicker と TimePicker のサンプルが Reactive Forms と Validators を使用するよう修正しました (#16487)。
  • fix(input-group): 境界線および Material のフォーカス ラインを修正しました (#16406)。
  • feat(date-range): Date Range Picker のラベルを整列させました (#16308)。
  • refactor(themes): アクセシビリティに関するカラー修正を行いました (#16497)。
  • fix(switch): Sass テーマを使用してコンポーネントのスタイルを設定するように修正しました (#16490)。
  • fix(list): 初期ロード時のネストされた要素内のアイコン サイズを修正しました (#16499)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • グリッド ツールバーのドロップダウンに AutoPositionStrategy を使用するようにしました (#16440)。
  • fix(blazor): gridAPI の初期化前に、data および autoGenerate が設定されているかを確認するようにしました (#16443)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • ネストされたコンテンツを含むツールチップで max-width が正しく処理されるよう修正しました (#16424)。
  • fix(Blazor): pinningPosition 用の数値 enum にタグを追加しました (#16397)。
  • fix(time-picker): 冗長なスタイルを削除しました (#16420)。
  • fix(combo): Sass テーマを使用してコンポーネントをスタイリングしました (#16382)。
  • fix(select): Sass テーマを使用してコンポーネントをスタイリングしました (#16401)。
  • fix(navbar): アイコン ボタンとアイコンのサイズを更新しました (#16432)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(igxPivot): ヘッダー領域の幅を調整しました (#16337)。
  • fix(action-strip): DOM 移動時に親要素が破棄されないように修正しました (#16270)。
  • fix(grid): レイアウトを持つ Web Components 内で列が変更された際にナビゲーション サービスを再初期化するようにしました (#16254)。
  • fix(checkbox): すべてのテーマで label-color-hover を使用するように修正しました (#16365)。
  • feat(badge): デザインを改善しました (#16354)。
  • fix(button): 特定条件下で発生する FOUC (Flash of Unstyled Content) を修正しました (#16403)。
  • fix(calendar): SSR 環境での問題を解決しました (#16399)。
  • 一部環境で selection.keys() にアクセスした際に発生する TypeError を防止しました (#16295)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(sorting): sortingExpressions でソート方向が none に設定された場合、その設定が正しく反映されるようにしました (#16317)。
  • ウィンド ウサイズの変更時にペインのサイズが正しくリサイズされるようにしました (#16220)。
  • refactor(themes): コンポーネン トテーマを theming パッケージに移動しました (#16275)。
  • feat(carousel): Carousel のテーマを Web Components に合わせて更新しました (#16284)。
  • fix(tooltip): SSR モード時に arrow (矢印) を生成しないようにしました (#16281)。
  • fix(tooltip): 別ターゲットにホバーした際、共有ツールチップを強制的に閉じるようにしました (#16291)。
  • feat(checkbox): tick-width プロパティを追加しました (#16330)。
  • refactor(input-group): デザインの更新を行いました (#16283)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • バージョン 20.1 の競合を解消しました (#16333)。
  • feat(timepicker): TimePicker サンプルにプロパティ パネルを追加しました (#16339)。
  • fix(elements): DefaultMergeStrategy をエクスポートするように修正しました (#16335)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • fix(IgxGrid): キーの押下が連続した際に通知を追加し、不要な変更検知を抑制しました (#16304)。
  • ツリー グリッドで階層化後にレコードの順序が乱れる問題を修正しました (#16329)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • PR 15819 のレビュー コメントを反映しました (#16232)。
  • deps(theming): 修正版を含む最新バージョンへ更新しました (#16289)。
  • fix(input): コントロールが touched としてマークされた際に、バリデーション状態が更新されるように修正しました (#16296)。
  • アクティベーションおよびセル結合に関するパフォーマンスを改善しました (#16251)。
  • fix(ESF): 条件付きフィルターを使用して ESF を開いた際に発生する ExpressionChangedAfterItHasBeenCheckedError を修正しました (#16286)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • getFocusableElements で非表示要素をフィルタリングするようにしました (#16189)。
  • refactor(themes): アバター サイズをカードのサムネイル内でのみ設定するように変更しました (#16268)。
  • test(elements): テストのちらつきを解消するため、待機時間を調整しました (#16271)。
  • fix(button-group): 不要な Bootstrap 固有のスタイルを削除しました (#16272)。
  • fix(themes): Angular Elements コンポーネントでスタイルが適用されない問題を修正しました (#16266)。
  • fix(card): アクションのテキスト カラーがボタン テーマをオーバーライドしないように修正しました (#16277)。
  • refactor(cell-merge): blazorSuppress を blazorCSSuppress に変更しました (#16274)。

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

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

新機能

  • 本リリースに新機能・拡張機能は含まれておりません。

不具合修正

  • chore(deps-dev): tar-fs を 3.0.9 から 3.1.1 に更新しました (#16243)。
  • chore(deps-dev): devalue を 5.1.1 から 5.3.2 に更新しました (#16186)。
  • chore(deps-dev): astro を 5.9.4 から 5.13.2 に更新しました (#16158)。

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

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

新機能

  • IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
    • 同じデータまたはその他のカスタム条件に基づいて列内のセルを 1 つのセルに構成および結合できる新しいセル結合機能を追加しました。

      個々の列で有効化できます:

      <igx-column field="field" [merge]="true"></igx-column>

      グリッド レベルで以下のいずれかの設定が可能です:

      • onSort - 列がソートされたときのみ結合。
      • always - データ操作に関わらず常に結合。
      <igx-grid [cellMergeMode]="'always'">
</igx-grid>

      デフォルトの cellMergeMode は onSort です。

      カスタム シナリオに応じて結合条件やロジックを変更する場合は、グリッドにカスタムの mergeStrategy を設定できます。

      特定のデータ フィールドに対してカスタム処理が必要な場合には、個々の列に mergeComparer を設定することもできます。

    • 列をグリッドの特定の側 (先頭または末尾) にピン固定できるようになりました。これにより、両側からのピン固定が可能です。これは、列の 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 が設定されていない場合、列はグリッドの columns の pinning オプションで指定された位置にデフォルト設定されます。

  • IgxCarousel
    • インデックスを受け入れる select メソッドのオーバーロードを追加しました。
    this.carousel.select(2, Direction.NEXT);
  • IgxDateRangePicker
    • カレンダーをカスタマイズするためのプロパティを追加しました:
      • headerOrientation
      • orientation
      • hideHeader
      • activeDate
      • disabledDates
      • specialDates
    • dialog モードのカレンダー ヘッダーをカスタマイズできるテンプレートを追加しました:
      • igxCalendarHeader
      • igxCalendarHeaderTitle
      • igxCalendarSubheader
    • 新しいプロパティを追加しました:
      • usePredefinedRanges - 組み込みの事前定義済み範囲を表示するかどうか
      • customRanges - カスタム範囲をチップとして表示可能
      • resourceStrings - リソース文字列のセットを提供可能
    • 動作変更
      • ダイアログにキャンセル ボタンが追加され、ユーザーが選択をキャンセルできるようになりました。
      • デフォルトでは、カレンダーは dialog モードでヘッダー付きで表示されます。
      • 入力中はピッカーは開いたままになります (2 インプットと dropdown モードの場合)。
      • 入力値に応じてカレンダーの選択が更新されます。
      • 入力値に応じてカレンダー ビューが更新されます。
      • シングル インプット モードではデフォルトでクリア アイコンが表示されます。
    • IgxPredefinedRangesAreaComponent
      • IgxDateRangePicker のカレンダー内で事前定義またはカスタム範囲を描画する新しいコンポーネントを追加しました。
  • IgxDatePicker
    • IgxDateRangePicker と同様に、以下の新しいプロパティを追加してカレンダーのカスタマイズ機能を強化しました:
      • hideHeader
      • orientation
      • activeDate
    • 動作変更
      • 入力値に応じてカレンダーの選択が更新されます。
      • 入力日付の値に応じてカレンダーの選択が更新されます。
  • IgxOverlay
    • PositionSettings に新しいオプション プロパティ offset (number 型) を追加しました。ターゲットからのピクセル単位のオフセットを設定できます。
  • IgxTooltip
    • ツールチップは、操作中に開いたままにできるようになりました。
  • IgxTooltipTarget
    • ツールチップのコンテンツや動作をカスタマイズするための新しいプロパティを追加しました。含まれるもの: positionSettings、hasArrow、sticky、closeButtonTemplate。詳細な使用方法と例については、ツールチップの README を参照してください。

一般

  • IgxDropDown に role 入力プロパティを追加しました。用途に応じて role 属性をカスタマイズできます。デフォルトは listbox です。
  • IgxTooltipTarget
    • 動作変更
      • showDelay 入力プロパティのデフォルト値を 200 に変更しました。
      • hideDelay 入力プロパティのデフォルト値を 300 に変更しました。
      • showTooltip および hideTooltip メソッドは showDelay/hideDelay を考慮しなくなりました。
  • IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid
    • ソートの改善
      • Schwartzian Transformation を用いてソート アルゴリズムの効率を改善しました。この手法 (decorate-sort-undecorate とも呼ばれる) は、ソート キーを一時的に元データに関連付けることで再計算を回避します。
      • ソート アルゴリズムを再帰型から反復型にリファクタリングしました。
    • グループ化の改善
      • グループ化アルゴリズムを再帰型から反復型にリファクタリングしました。
      • グループ化処理を最適化しました。

サンプル

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

Angular API

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

ナレッジベース

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

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

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