アップデートガイド

Ignite UI for Angular バージョニングは、最初の数字がコードでサポートされる Angular のメジャーバージョンで、2 番目の数字はメジャーバージョンリリースの数字です。また重大な変更がメジャーリリース間でリリースされる場合があります。 Ignite UI for Angular 各リリースのすべての変更の一覧は、製品 CHANGELOG (英語) をご覧ください。

Ignite UI for Angular パッケージは ng update Schematics で自動バージョンマイグレーションをサポートします。これにより、すべての可能性のある重大な変更 (セレクターの名前、クラス、@Input/Output プロパティの変更) をマイグレーションを試みます。ただし、マイグレーションできない変更がある場合もあります。通常これらの変更はタイプスクリプトアプリケーションロジックに関連しており、詳細は以下をご確認ください。

はじめに ng update コマンドを実行してアプリケーションとパッケージに使用できるアップデートをチェックします。

ng update

Ignite UI for Angular ライセンス版パッケージをアップデートする場合は、以下のコマンドを実行してください。

ng update @infragistics/igniteui-angular

Ignite UI for Angular 無料パッケージをアップデートする場合は、以下のコマンドを実行してください。

ng update igniteui-angular

@infragistics/igniteui-angular または igniteui-angular を更新するときは、@angular/core、@angular/cli および igniteui-cli パッケージを一致するバージョンに更新してください。 Ignite UI CLI パッケージをアップデートする場合は、以下のコマンドを実行してください。

ng update igniteui-cli

Angular Core パッケージをアップデートする場合は、以下のコマンドを実行してください。

ng update @angular/core

Angular CLI パッケージをアップデートするには、以下のコマンドを使用してください。

ng update @angular/cli

パッケージの依存関係の不一致が原因で ng update コマンドが失敗した場合は、アップデートを元に戻し、node_modules フォルダを削除してから、--force フラグを指定してアップデートを再実行します。

その他の手動の変更

自動的にアップデートできない変更もあります。以下の変更はバージョンごとにセクションが分かれています。アッププデートが必要な場合は、現在のバージョンから開始してそれ以降のアップデートを適用しjます。

例: 6.2.4 から 7.1.0 にアップデートする場合、[6.x .. から] セクションから始めて変更を適用していきます。

21.0.x から 21.1.x の場合

バージョン 21.1.0 では、Sass テーマフレームワークの廃止予定の css-vars ミックスインの代わりに使用できる新しい tokens ミックスインが付属しています。表面的には外観的な変更ですが、新しい tokens ミックスインは、すべての Ignite UI フレームワークで機能する汎用的なグローバルコンポーネントテーマトークンを生成します。css-vars ミックスインは現在廃止されており、将来のバージョンで削除される予定です。そのため、できるだけ早く新しい tokens ミックスインに切り替えることをお勧めします。

tokens ミックスインは、汎用的な --ig-* フォールバックチェーンとローカルトークン参照の適切な書き換えを使用して、global または scoped モードでコンポーネントの CSS 変数トークンを生成します。

グローバルモード (デフォルト) - ユニバーサル --ig-{component}-{property} トークンを出力します。ローカル var() 参照はグローバルな同等のものに書き換えられるため、派生値 (例: adaptive-contrast) は任意のスコープで正しく解決されます。サイズ可能な式はスキップされるため、代わりに具体的な値を渡してください。

// 入力:
@include tokens(avatar-theme($background: red));

// 出力:
:root {
  --ig-avatar-background: red;
  /* ... 残りのアバター プロパティ ... */
}

スコープモード - フォールバックチェーンを持つコンポーネントスコープ変数 (--{property}) を出力します: 構成されたプレフィックス (--igx-*) -> ユニバーサル (--ig-*) -> スキーマデフォルト。スタイルシートルートから呼び出されると、テーマの selector がルールの作成に使用されます。セレクター内から呼び出されると、現在のセレクターとコンポーネントセレクターの両方が変数を受け取ります。基本的に、これは現在廃止されている css-vars ミックスインと同じ結果を生成します。

// 入力 (ルートから):
@include tokens(avatar-theme($background: red), $mode: 'scoped');

// 出力:
igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-avatar-background, red));
  /* ... 残りのアバター プロパティ ... */
}

// 入力 (セレクター内から):
.my-theme {
  @include tokens(avatar-theme($background: red), $mode: 'scoped');
}

// 出力:
.my-theme,
.my-theme igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-avatar-background, red));
  /* ... */
}

スコープモードでは、適切な変数スコープのコンポーネントセレクターを決定するために、生成されたテーママップの selector プロパティが必要です。ミックスインがスタイルシートのルートから呼び出された場合、生成されたルールはテーマの内部 selector 値を使用します。セレクター内から呼び出された場合、そのセレクターとコンポーネントセレクターの両方が変数を受け取ります。

// グローバル オーバーライド:
:root {
  @include tokens(avatar-theme($background: orange));
}
// 結果: --ig-avatar-background: orange;

// スコープ消費 (明示的なオーバーライドなし):
@include tokens(avatar-theme($schema: $schema), $mode: 'scoped');
// 結果: --background は var(--igx-avatar-background, var(--ig-avatar-background, #000)) を通じて解決され、
//       --ig-avatar-background からグローバル オレンジ値を取得します。

グローバルオーバーライドはスコープモードに流れ込みます。 スコープ変数は --ig-* トークンにフォールバックするため、:root でグローバルトークンを設定すると、すべてのスコープインスタンスに伝播されます。

20.x から 21.0.x の場合

マルチエントリポイントのサポート

バージョン 21.0.0 では、より効果的なツリーシェイキングとコード分割のためにマルチエントリポイントが導入されました。メインエントリポイント (igniteui-angular) は完全な下位互換性を維持していますが、最適なバンドルサイズを得るためには、粒度の細かいエントリポイントへの移行が推奨されます。

主な変更点:

コンポーネントが専用のエントリポイントに整理されました (例: igniteui-angular/grids/grid、igniteui-angular/button)
一部コンポーネントの再配置 (入力ディレクティブ、オートコンプリート、ラジオグループ)
タイプ名の変更: Direction → CarouselAnimationDirection

移行:

更新時にインポートを自動的に移行するかどうかを確認するプロンプトが表示されます。

ng update igniteui-angular

プロンプトが表示されたら 「Yes」 を選択するか、後から次の方法で移行します:

ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

エントリポイント、移行オプション、破壊的変更、および使用例の詳細については、コード分割とマルチエントリポイントガイドを参照してください。

依存性注入のリファクタリング

すべての内部依存性注入は inject() API を使用するようになりました。通常、アプリケーションコードには影響しませんが、Ignite UI コンポーネントやサービスを拡張している場合は、コンストラクターのパラメーターの代わりに inject() を使用するように、コンストラクターの更新が必要です。

17.2.x から 18.0.x の場合

重大な変更

バージョン 18.0.x では、廃止された displayDensity プロパティが IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxRowIsland およびすべてのグリッド関連コンポーネントから削除され、代わりにカスタム CSS プロパティ --ig-size が採用されました。詳細については、16.0.x から 16.1.x へのアップデートガイドを参照してください。

一般

IgxPivotGrid

重大な変更

ピボットグリッドの showPivotConfigurationUI プロパティが変更され、pivotUI に拡張されました。

// version 17.2.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [showPivotConfigurationUI]="false">
</igx-pivot-grid>

// version 18.0.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [pivotUI]="{ showConfiguration: false }">
</igx-pivot-grid>

17.0.x から 17.1.x の場合

一般

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- 重大な変更
  - rowAdd および rowDelete イベントは、IGridEditEventArgs ではなく IRowDataCancelableEventArgs タイプのイベント引数を発行するようになりました。2 つのインターフェイスには引き続き互換性がありますが、これらのイベントプロパティの重複である cellID、newValue、oldValue、isAddRow は IRowDataCancelableEventArgs で非推奨となり、将来のバージョンでは削除される予定です。正しい新しいインターフェイスに切り替えると、安全に削除できる非推奨の使用法が明らかになります。
- 非推奨
  - rowID プロパティは、IGridEditDoneEventArgs、IPathSegment、IRowToggleEventArgs、IPinRowEventArgs、および IgxAddRowParent のインターフェイスでは非推奨となり、将来のバージョンでは削除される予定です。代わりに rowKey を使用してください。
  - primaryKey プロパティは、次のインターフェイスでは非推奨になりました: IRowDataEventArgs、IGridEditDoneEventArgs。代わりに rowKey を使用してください。
  - data プロパティは、次のインターフェイスでは非推奨になりました: IRowDataEventArgs。代わりに rowData を使用してください。

重大な変更

バージョン 17.1.x では、igxButton ディレクティブの icon タイプが、flat タイプの igxIconButton ディレクティブに変更されました。自動移行が利用可能で、ng update 時に適用されます。ただし、以前は icon タイプのボタンで使用できた igxButton 入力プロパティの一部は、新しく作成された igxIconButton には適用できません。icon タイプのボタンで igxButtonColor または igxButtonBackground プロパティを使用した場合は、次のように更新する必要があります。

// バージョン 17.0.x
<button igxButton="icon" [igxButtonBackground]="'red'">
    <igx-icon fontSet="material">search</igx-icon>
</button>

// バージョン 17.1.x
<button igxIconButton="flat" [style.background]="'red'">
    <igx-icon fontSet="material">search</igx-icon>
</button>

注: ユーザーはインポートに IgxIconButtonDirective を手動で追加する必要があります。

import { IgxIconButtonDirective } from 'igniteui-angular';

@Component({
    ...
    imports: [IgxIconButtonDirective]
})

16.1.x から 17.0.x の場合

一般

17.0 Angular では、@nguniversal/* パッケージが削除されました。プロジェクトがこれらのパッケージを使用している場合、標準の ng update 呼び出しにより、不適切に変更された package-lock.json が原因で igniteui-angular 移行でエラーが発生します。細については、こちらを参照してください。17.0.x に更新するには、次の追加手順のいずれかを実行する必要があります。
- ng update を実行する前に package-lock.json ファイルを削除します。
- ng update igniteui-angular を実行する前に npm dedupe --legacy-peer-deps を実行します。

Breaking change

In IgxCombo’s selectionChanging event arguments type IComboSelectionChangingEventArgs has these changes:
- properties newSelection and oldSelection have been renamed to newValue and oldValue respectively to better reflect their function. Just like Combo’s value, those will emit either the specified property values or full data items depending on whether valueKey is set or not. Automatic migrations are available and will be applied on ng update.
- two new properties newSelection and oldSelection are exposed in place of the old ones that are no longer affected by valueKey and consistently emit items from Combo’s data.
- properties added and removed now always contain data items, regardless of valueKey being set. This aligns them with the updated newSelection and oldSelection properties.

If your code in selectionChanging event handler was depending on reading valueKeys from the event argument, update it as follows:

  // version 16.1.x
  public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
    this.addedItems = e.added;
    this.removedItems = e.removed;
  }

  // version 17.0.x
  public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
    this.addedItems = e.added.map(i => {
       return i[e.owner?.valueKey]
    });
    this.removedItems = e.removed.map(i => {
       return i[e.owner?.valueKey]
    });
  }

getCurrentResourceStrings has been removed. Use the specific component string imports instead.
- E.g. EN strings come from igniteui-angular: import { GridResourceStringsEN } from 'igniteui-angular';
- E.g. DE or other language strings come from igniteui-angular-i18n: import { GridResourceStringsDE } from 'igniteui-angular-i18n';
  
  Usage examples can be found in the updated Localization (i18n) doc.

重大な変更

16.0.x から 16.1.x の場合

一般

We are moving away from the DisplayDensityToken injection token as a way to set the size of the components in favor of a simpler, more robust way - using CSS custom properties. For that reason the DisplayDensityToken injection token is now deprecated. This ripples across all components that expose the displayDensity input property. The token and input properties will be removed in 17.0.0. We urge you to do the following:

Remove all declarations where the DisplayDensityToken is provided:

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],

Remove all bindings or programmatic assignments to the displayDensity input property:

{/* Remove `[displayDensity]="'compact'"` */}
<igx-grid [displayDensity]="'compact'">...</igx-grid>

Instead, use the custom CSS property --ig-size to achieve the same result as with displayDensity:

/* 
Add --ig-size to a component or global file.
Available values are:
  - compact: --ig-size-small
  - cosy: --ig-size-medium
  - comfortable: --ig-size-large
*/
igx-grid {
    --ig-size: var(--ig-size-small);
}

互換性のある変更

コンポーネントのサイズを設定する方法として DisplayDensityToken インジェクショントークンを廃止し、CSS カスタムプロパティを使用する、よりシンプルで堅牢な方法を採用しています。そのため、DisplayDensityToken インジェクショントークンは非推奨になりました。これは、displayDensity 入力プロパティを公開するすべてのコンポーネントに影響を与えます。トークンと入力プロパティは 17.0.0 で削除されます。次のことを行うことをお勧めします。

DisplayDensityToken が提供されているすべての宣言を削除します:

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>

displayDensity 入力プロパティへのすべてのバインディングまたはプログラムによる割り当てを削除します:

/* 
Add --ig-size to a component or global file.
Available values are:
  - compact: --ig-size-small
  - cosy: --ig-size-medium
  - comfortable: --ig-size-large
*/
igx-grid {
    --ig-size: var(--ig-size-small);
}

15.1.x から 16.0.x の場合

Angular 16 へのアップグレードには、NgModules の内部での動作方法の変更が伴います。以前は、内部的に別のモジュールに依存するモジュールを追加すると、アプリ内で両方の宣言が利用可能になりました。この動作は意図されたものではなく、Angular 16 では変更されています。あなたのアプリがこの動作に依存していた場合、例えば IgxGridModule のような多くの内部依存関係を含むモジュールをインポートし、それらに付属するコンポーネントを使用しているだけであった場合、アプリが使用するコンポーネントごとに個別にモジュールを手動で追加する必要があります。
重大な変更
16.0.x では、ページングに関連するすべてのグリッドプロパティが削除されます。ページング動作は、完全に IgxPaginatorComponent を通じて構成および制御されるようになりました。グリッドでページングを有効にするには、グリッドで IgxPaginatorComponent を初期化し、関連する入力プロパティを設定し、イベントハンドラーをページネーター自体にアタッチします。

<igx-grid ...>
    <igx-paginator #paginator [totalRecords]="totalRecords" [perPage]="25" (pageChange)="pageChange($event) (perPageChange)="perPageChange($event)">
    </igx-paginator>
<igx-grid>

16.0.x では、グリッドメソッド getCellByColumnVisibleIndex(rowIndex:number,index:number) が削除されました。代わりに、getCellByKey(rowSelector: any, columnField: string) または getCellByColumn(rowIndex: number, columnField: string) を使用します。例:
Visual Change
In 15.1 the sizes of the input components have increased. This is more noticeable when using the Material theme. We do this to match Material spec. If your application is negatively affected by the change, you can use the displayDensity input and set it to a more dense setting, e.g. from comfortable to cozy or from cozy to compact.

Example

@ViewChild('grid', { static: true }) private grid: IgxGridComponent;
@ViewChild('paginator', { static: true }) private paginator: IgxPaginatorComponent;

// prior version 16.0.x
public onButtonClick(event) {
    this.grid.nextPage();
    this.grid.previousPage();
    this.grid.paginate(0);
}

// from version 16.0.x
public onButtonClick(event) {
    this.paginator.nextPage();
    this.paginator.previousPage();
    this.paginator.paginate(0);
}

In 15.1 select and combo component now have background around the toggle icon. You can change the background and the icon color using scss or css.

Example

$my-select: select-theme(
    $toggle-button-background: red,
    $toggle-button-foreground: #fff,
);

$my-combo: combo-theme(
    $toggle-button-background: red,
    $toggle-button-foreground: #fff,
);

@include css-vars($my-select);
@include css-vars($my-combo);

Example

.igx-select {
    --igx-select-toggle-button-background: red;
    --igx-select-toggle-button-foreground: #fff;
}

.igx-combo {
    --igx-combo-toggle-button-background: red;
    --igx-combo-toggle-button-foreground: #fff;
}

15.0.x から 15.1.x の場合

14.2.x から 15.0.x の場合

igxGrid, igxHierarchicalGrid, igxTreeGrid
- Parameters in grid templates now have types for their context. This can also cause issues if the app is in strict template mode and uses the wrong type. References to the template that may require conversion:
  - IgxColumnComponent - ColumnType (for example the column parameter in igxFilterCellTemplate)
  - IgxGridCell - CellType (for example the cell parameter in igxCell template)
Ignite UI for Angular has a dependency on igniteui-theming. Add the following preprocessor configuration in your angular.json file.

 "build": {
   "options": {
     "stylePreprocessorOptions": {
  "includePaths": ["node_modules"]
     }
   }
 }

Breaking Change - All global CSS variables for theme configuration, colors, elevations, and typography have changed the prefix from --igx to --ig. This change doesn’t affect global component variables;

Example:

In 14.2.x:
```
:root {
    --igx-typography: 'Titillium Web', sans-serif; 
}
```
In 15.0.x this becomes:
```
:root {
    --ig-typography: 'Titillium Web', sans-serif; 
}
```

一般

igxGrid、igxHierarchicalGrid、igxTreeGrid
- グリッドテンプレートのパラメーターに、コンテキストの型が追加されました。これは、アプリが厳密なテンプレートモードであり、間違った型を使用している場合にも問題を引き起こす可能性があります。変換が必要なテンプレートへの参照:
  - IgxColumnComponent - ColumnType (たとえば、igxFilterCellTemplate の列パラメーター)
  - IgxGridCell - CellType (たとえば、igxCell テンプレートの cell パラメーター)
Ignite UI for Angular に igniteui-theming の依存関係があります。次のプリプロセッサ設定を angular.json ファイルに追加します。

"build": {
  "options": {
    "stylePreprocessorOptions": {
      "includePaths": ["node_modules"]
    }
  }
}

重大な変更 - テーマの構成、カラー、エレベーション、およびタイポグラフィのすべてのグローバル CSS 変数のプレフィックスが --igx から --ig に変更されました。この変更はグローバルコンポーネント変数には影響しません。

例:

14.2.x の場合:
```
:root {
    --igx-typography: 'Titillium Web', sans-serif; 
}
```
15.0.x の場合は以下のようになります:
```
:root {
    --ig-typography: 'Titillium Web', sans-serif; 
}
```
Breaking Change - The palette function now requires a surface color to be passed, while passing a value for the gray color is optional. If a value for the gray base color is not provided, it will be generated automatically based on the lightness of the surface color - light surface color results in a black(#000) gray base color, whereas a dark surface color generates a white(#fff) base gray color. When you’re generating a palette, you have to keep in mind that there are no longer default values for info, success, error and warn colors. You have to set them explicitly if you want to use them. You can also grab those colors from an existing palette if you don’t want to come up with the values yourself.

Example
```
$my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $surface: #fff,
    $info: color($light-material-palette, 'info'),
    $success: color($light-material-palette, 'success'),
    $error: color($light-material-palette, 'error'),
    $warn: color($light-material-palette, 'warn'),
);

@include palette($my-palette);
```

Breaking Change - The palette parameter is now removed from all component themes. You can use the palette mixin to scope a custom palette in for a custom component component theme. Since we dropped support for IE11 all component themes refer to the global CSS variables for colors, elevations, typography, etc., therefore passing a custom palette to a component theme is no longer necessary.

Generating a custom theme with a custom palette:

// app.component.scss

$my-palette: palette(
    $primary: royalblue,
    $secondary: orange,
    $surface: white
);

$avatar: avatar-theme(
    $background: color($color: 'primary'), 
    $color: contrast-color($color: 'primary')
);

:host ::ng-deep {
    // Include the custom palette in the scope of the app component.
    // It will have a higher specificity than the global palette.
    @include palette($my-palette):

    .my-avatar {
        @include avatar($avatar);
    }
}

テーマ

重大な変更 - grays 入力引数の名前が gray に変更されました。
既存のコードに与える影響は以下のとおりです。

14.2.x の場合:

$my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $grays: #000
);

.my-class {
    background: color($color: 'grays', $variant: 300);
    color: contrast-color($color: 'grays', $variant: 300);
    border-color: hsl(var(--igx-grays-500));
}

15.0.x 以降:

タイポグラフィ

重大な変更 - type-style ミックスインはパラメーターとして type-scale を受け付けず、カテゴリ名のみを受け付けます。

14.2.x 以前:
```
.my-class {
    @include type-style($type-scale: $my-type-scale, $category: h1);
}
```
15.0.x 以降:
```
.my-class {
    @include type-style(h1);
}
```

エレベーション

重大な変更 - elevation 関数には名前付き引数が 1 つのみあります- $name (エレベーション名)。

重大な変更 - elevations 機能が削除されました。configure-elevations ミックスインを使用してエレベーションの色を設定できます。

14.2.x 以前:

.my-class {
    box-shadow: elevation($elevations, $elevation: 8);
}

15.0.x 以降:

.my-class {
    box-shadow: elevation(8);
}

<igx-grid-toolbar>
    <igx-grid-toolbar-title>Title</igx-grid-toolbar-title>
    <igx-grid-toolbar-actions>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

グリッドツールバー

13.1.x から 13.2.x の場合

Breaking Change - All RTL specific stylesheets have been removed. Ignite UI themes now support RTL direction by default. Users who have previously used *-rtl.css specific themes must switch to the regular theme files.

テーマ

13.0.x から 13.1.x の場合

igxGrid, igxHierarchicalGrid, igxTreeGrid
- Breaking Change - The columns’ movable property has been deprecated. Use the exposed grid moving property instead:
```
<igx-grid [moving]="true">
</igx-grid>
```
IgxHierarchicalGrid
- Breaking Change - The public API service for igxHierarchicalGrid and igxRowIsland components hgridAPI is renamed to gridAPI.

IgxToast

Breaking Change - The igx-toast deprecated position property has been removed. We suggest using positionSettings property as follows:

@ViewChild('toast', { static: true }) public toast: IgxToastComponent;

public ngOnInit(): void {
    this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}

一般

12.2.x から 13.0.x の場合

IE discontinued support
IgxDialog
- Breaking Change - The default positionSettings open/close animation has been changed to fadeIn/fadeOut.
igxGrid, igxHierarchicalGrid, igxTreeGrid
- Breaking Change - The following deprecated inputs have been removed - showToolbar, toolbarTitle, columnHiding, columnHidingTitle, hiddenColumnsText, columnPinning, columnPinningTitle, pinnedColumnsText. Use IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent instead.
- Breaking Change - Upon adding of igx-toolbar component, now you should manually specify which features you want to enable - Column Hiding, Pinning, Excel Exporting. Advanced Filtering may be enabled through the allowAdvancedFiltering input property on the grid, but it is recommended to enable it declaratively with markup, as with the other features.
- Breaking Change - The rowSelected event is renamed to rowSelectionChanging to better reflect its function.
- Breaking Change - The columnSelected event is renamed to columnSelectionChanging to better reflect its function.
- Breaking Change - columnsCollection is removed. Use columns instead. If at certain occasions columns return empty array, query the columns using ViewChildren and access those in ngAfterViewInit:
```
@ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
public columns: QueryList<IgxColumnComponent>;
```
- Breaking change - when applying a custom directive on the grid, inject the IGX_GRID_BASE token in the constructor in order to get reference to the hosting grid:
```
<igx-grid customDirective ...></igx-grid>
```
```
@Directive({
    selector: '[customDirective]'
})
export class customDirective {

constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
```
RowDirective, RowType
- Breaking Change - rowData and rowID properties are removed from RowDirective and from classes implementing the RowType interface. Use data and key instead. Use ng update for automatic migration. Automatic migration will not be able to pick up some examples from templates, where the template context object is not typed:
```
<ng-template igxCell let-cell="cell">
    <span>{{ cell.rowID }}</span>
    <span>{{ cell.row.rowData.ProductID }}</span>
</ng-template>
```
  Update such templates manually to
```
<span>{{ cell.key }}</span>
<span>{{ cell.row.data.ProductID }}</span>
```
igxGrid
- Exposed a groupStrategy input that functions similarly to sortStrategy, allowing customization of the grouping behavior of the grid.
IgxCsvExporterService, IgxExcelExporterService
- Exporter services are no longer required to be provided in the application since they are now injected on a root level.
IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent
- Exposed new input buttonText which sets the text that is displayed inside the dropdown button in the toolbar.
IgxCombo
- Added groupSortingDirection input, which allows you to set groups sorting order.
IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- Added new directives for re-templating header sorting indicators - IgxSortHeaderIconDirective, IgxSortAscendingHeaderIconDirective and IgxSortDescendingHeaderIconDirective.
IgxDialog
- Added focusTrap input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to true.
IgxColumnActionsComponent
- Breaking Change - The following input has been removed
  - Input columns. Use igxGrid columns input instead.
IgxCarousel
- Breaking Changes -The carousel animation type CarouselAnimationType is renamed to HorizontalAnimationType.
IgxGridStateDirective - now supports disableHiding column prop and column groups

一般

IE のサポート終了
IgxDialog
- 重大な変更 - デフォルトの positionSettingsopenclose アニメーションが fadeIn/fadeOut に変更されました。
igxGrid、igxHierarchicalGrid、igxTreeGrid
- 重大な変更 - 次の非推奨の入力が削除されました - showToolbar、toolbarTitle、columnHiding、columnHidingTitle、hiddenColumnsText、columnPinning、columnPinningTitle、pinnedColumnsText。代わりに、IgxGridToolbarComponent、IgxGridToolbarHidingComponent、IgxGridToolbarPinningComponent を使用してください。
- 重大な変更 - igx-toolbar コンポーネントを追加したら、有効にする機能を手動で指定する必要があります - 列の非表示、ピン固定、Excel のエクスポート。高度なフィルタリングは、グリッドの allowAdvancedFiltering 入力プロパティを介して有効にすることができますが、他の機能と同様に、マークアップを使用して宣言的に有効にすることをお勧めします。
- 重大な変更 - rowSelected イベントは、その機能をより適切に反映するために、rowSelectionChanging に名前が変更されました。
- 重大な変更 - columnSelected イベントは、その機能をより適切に反映するために、columnSelectionChanging に名前が変更されました。
- 重大な変更 - columnsCollection が削除されました。代わりに columns を使用してください。特定の場合に columns が空の配列を返す場合は、ViewChildrenを使用して列にクエリを実行し、ngAfterViewInit の列にアクセスします。

<igx-icon [style.color]="'#e41c77'">home</igx-icon>

<igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>

重大な変更 - グリッドにカスタムディレクティブを適用する場合、ホスティンググリッドへの参照を取得するために、コンストラクターに IGX_GRID_BASE トークンを注入します。

// free version
@import '~igniteui-angular/lib/core/styles/themes/index';

// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';

<igx-grid customDirective ...></igx-grid>

// free version
@use 'igniteui-angular/theming' as *;

// licensed version:
@use '@infragistics/igniteui-angular/theming' as *;

@Directive({
    selector: '[customDirective]'
})
export class customDirective {

constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }

// _variables.scss
// free version
@import '~igniteui-angular/lib/core/styles/themes/index';

// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';

// _other-file.scss
@import 'variables';

RowDirective、RowType
- 重大な変更 - rowData および rowID プロパティは、RowDirective および RowType インターフェイスを実装するクラスから削除されます。代わりに data と key を使用してください。自動移行には ng update を使用します。自動移行では、テンプレートコンテキストオブジェクトが入力されていないテンプレートからから一部の例を取得できません。

// _variables.scss
// free versioin
@use 'igniteui-angular/theming' as *;
@forward 'igniteui-angular/theming';

// licensed version
@use '@infragistics/igniteui-angular/theming' as *;
@forward '@infragistics/igniteui-angular/theming';

// _other-file.scss
@use 'variables' as *;

<ng-template igxCell let-cell="cell">
    <span>{{ cell.rowID }}</span>
    <span>{{ cell.row.rowData.ProductID }}</span>
</ng-template>

このようなテンプレートを手動で更新します:

<span>{{ cell.key }}</span>
<span>{{ cell.row.data.ProductID }}</span>

.some-class {
    background: var(--igx-surface-500); // returns HEX color
}

igxGrid
- sortStrategy と同様に機能する groupStrategy 入力を公開し、グリッドのグループ化動作をカスタマイズできるようにしました。
IgxCsvExporterService、IgxExcelExporterService
- エクスポーターサービスはルートレベルで注入されるようになったため、アプリケーションで提供する必要がなくなりました。
IgxGridToolbarPinningComponent、IgxGridToolbarHidingComponent
- ツールバーのドロップダウンボタン内に表示されるテキストを設定する新しい入力 buttonText を公開しました。
IgxCombo
- グループのソート順序を設定できる groupSortingDirection 入力が追加されました。
IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- ヘッダーソートインジケーターを再テンプレート化するための新しいディレクティブを追加しました - IgxSortHeaderIconDirective、IgxSortAscendingHeaderIconDirective、および IgxSortDescendingHeaderIconDirective。
IgxDialog
- 開いたときに Tab キーのフォーカスをダイアログ内にトラップするかどうかを設定する focusTrap入力を追加しました。デフォルトは true です。
- 重大な変更 - 次の入力が削除されました:
  - columns 入力。代わりに igxGrid``columns 入力を使用してください。
IgxCarousel
- 重大な変更 - カルーセルアニメーションタイプ CarouselAnimationType は HorizontalAnimationType に名前が変更されました。
IgxGridStateDirective - disableHiding 列プロパティと列グループをサポートするようになりました。

.some-class {
    background: hsl(var(--igx-surface-500)); // returns a list of H, S, L
}

This was done so that palettes can be changed at runtime using CSS variables only. In this way the alpha channel for a given palette color can be modified at runtime without affecting the underlying palette color.

Please ensure the correct palette and component schema are passed to your custom-made component and global themes. If you want to create a global dark theme, make sure to select a lighter color shade for your gray color, for instance:

$my-dark-palette: palette(
    $primary: olive,
    $secondary: yellow,
    $grays: #fff
);

@include dark-theme($palette: $my-dark-palette);

Likewise, light themes require a darker shade of gray and a light color schema.

If you’ve not excluded any component themes from the global theme but you still want to create your own custom replacement themes using the css-vars mixin, make sure the theme is passed the correct palette and corresponding schema:

$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

@include css-vars($my-custom-grid);

Excluded Component Themes:

In case you’ve excluded some component themes from the global theme and you’ve created custom replacement themes, you should ensure that the component mixin is included and is passed the correct component theme:

$my-dark-palette: palette(
    ...
    $exclude: ('igx-grid')
);

$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

// Ensuregrid is included:
@include grid($my-custom-grid);

In case your custom component themes are declared in a separate component Sass file, other than the global styles.scss, ensure the core mixin is also included.

// free version
@use 'igniteui-angular/theming' as *;

// licensed version
@use '@infragistics/igniteui-angular/theming' as *;

// Include the core module mixin.
@include core();

// Create your theme.
$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

// Include your custom theme styles.
@include grid($my-custom-grid);

To get a better grasp on the Sass Module System, you can read this great article by Miriam Suzanne;

テーマ

12.0.x から 12.1.x の場合

Breaking Changes:
- Paginator - The way the Paginator is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the [paging]="true" property is removed from all grids and all other properties related to the paginator in the grid are deprecated. It is recommended to follow the guidance for enabling Grid Paging features as described in the Paging topic.
- PageSizeSelector and PageNavigation are introduced to ease the implementation of any custom content:
```
<igx-paginator #paginator>
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        [My custom text]
        <igx-page-nav></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
```
- The API for the paging component was changed during the refactor and many of the old properties are now deprecated. Unfortunately, having an adequate migration for some of these changes is complicated to say the least, so any errors should be handled at application level.
- The following properties are deprecated from the Grid:
  - paging, perPage page, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone
- The following methods, also are deprecated:
  - nextPage()
  - previousPage()
- The following property has been removed:
  - paginationTemplate - in order to define a custom template, use the igx-paginator-content
- HierarchicalGrid specifics - The following usage of *igxPaginator Directive is necessary when it comes to enabling paging on RowIslands:
```
<igx-hierarchical-grid #hGrid >
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>
```
- While the migration will move your template content inside the igx-paginator-content content, it might not resolve all template bindings. Make sure to check your template files after the migration. The following bindings should be changed manually as these properties have been removed (pagerEnabled, pagerHidden, dropdownEnabled, dropdownHidden):
  
  From:
```
<igx-paginator #paginator
    [pagerEnabled]="!isPagerDisabled" [pagerHidden]="isPagerHidden"
    [dropdownHidden]="isDropdownHidden">
</igx-paginator>
```
  To:
```
<igx-paginator #paginator *ngIf="!isPagerDisabled">
    <igx-paginator-content>
        <igx-page-size *ngIf="isDropdownHidden"></igx-page-size>
        <igx-page-nav *ngIf="isPagerHidden"></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
```
- IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent are no longer exposed in the public API. See sections below for detail guide on upgrading to the new IgxGridCell.

Grid Deprecation:

The DI pattern for providing IgxGridTransaction is deprecated. The following will still work, but you are advised to refactor it, as it will likely be removed in a future version:

@Component({
    template: `<igx-grid [data]="data">
    ...
    </igx-grid>`,
    providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
    ...
})
export class MyCustomComponent {
    ...
}

In order to achieve the above behavior, you should use the the newly added batchEditing input:

@Component({
    template: `<igx-grid [data]="data" [batchEditing]="true">
    ...
    </igx-grid>`
    ...
})
export class MyCustomComponent {
    ...
}

getCellByColumnVisibleIndex is now deprecated and will be removed in next major version. Use getCellByKey, getCellByColumn instead.

グリッド

重大な変更:
- Paginator - グリッドでページネーターがインスタンス化される方法が変更されました。グリッドツリーに投影される別個のコンポーネントになりました。したがって、[paging]="true" プロパティはすべてのグリッドから削除され、グリッド内のページネーターに関連する他のすべてのプロパティは非推奨です。ページングトピックで説明されているように、Grid Paging 機能を有効にするためのガイドに従うことをお勧めします。
- PageSizeSelector および PageNavigation が導入され、カスタムコンテンツの実装が容易になりました。
```
<igx-paginator #paginator>
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        [My custom text]
        <igx-page-nav></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
```

const cell = grid.getCellByColumn(0, 'ProductID');     // returns IgxGridCell
const cell = grid.getCellByKey('ALFKI', 'ProductID');  // returns IgxGridCell
const cell = grid.getCellByColumnVisibleIndex(0, 0);   // returns IgxGridCell
const rowCells = grid.getRowByIndex(0).cells;          // returns IgxGridCell[]
const selectedCells = grid.selectedCells;              // returns IgxGridCell[]
const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[]

ページングコンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーションレベルで処理する必要があります。
次のプロパティはグリッドから非推奨になりました:
- paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone
次のメソッドも非推奨です:
- nextPage()
- previousPage()
次のプロパティが削除されました:
- paginationTemplate - カスタムテンプレートを定義するには、igx-paginator-content を使用します。

HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の *igxPaginator ディレクティブの使用法が必要です。

<igx-hierarchical-grid #hGrid >
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

IgxGridCell の移行

IgxGridCellComponent、IgxTreeGridCellComponent、IgxHierarchicalGridCellComponent、IgxGridExpandableCellComponent はパブリック API で公開されなくなりました。

テーマ

コンパイルの警告に関する苦情 (#9793 を参照) のため、math.div 関数を使用するようになりました。この機能は、バージョン 1.33.0 以降の Dart Sass (英語) でサポートされています。

Update to the latest version of Angular using ng update - Angular 12.1.0+ uses the dart-sass compiler by default.
```
ng update [options]
```
If for some reason you don’t use the Ignite UI/Angular CLI, you’d need to replace node-sass with sass in your Node project.
```
npm uninstall node-sass
npm install sass --save-dev
```
If for some reason you cannot upgrade to the latest version of Angular using the method above, you can fall back to the old Sass division method by setting a global flag in your Sass file:
```
$__legacy-libsass: true;
```

ソリューション

11.1.x から 12.0.x の場合

Breaking Changes:

IgxAvatar theme has been simplified. The number of theme params (avatar-theme) has been reduced significantly and no longer includes prefixed parameters(icon-*, initials-*, image-*) and suffixed parameters(border-radius-*). Updates performed with ng update will migrate existing avatar themes, but some additional tweaking may be required to account for the absence of prefixed and suffixed params.

You will need to modify existing type specific avatar themes in the following way:

For example, this:
```
$avatar-theme: avatar-theme(
    $initials-background: blue,
    $initials-color: orange,
    $icon-background: blue,
    $icon-color: orange,
);

@include avatar($avatar-theme);
```
Needs to be transformed into this:
```
$initials-avatar: avatar-theme(
    $background: blue,
    $color: orange,
);

$icon-avatar: avatar-theme(
    $background: blue,
    $color: orange,
);

.initials-avatar {
    @include avatar($initials-avatar);
}

.icon-avatar {
    @include avatar($icon-avatar);
}
```
IgxButton theme has been simplified. The number of theme params (button-theme) has been reduced significantly and no longer includes prefixed parameters (flat-*, raised-*, etc.). Updates performed with ng update will migrate existing button themes, but some additional tweaking may be required to account for the absence of prefixed params.

In order to achieve the same result as from the code snippet below.
```
<button igxButton="raised">Raised button</button>
<button igxButton="outlined">Outlined button</button>
```
```
$my-button-theme: button-theme(
    $raised-background: red,
    $outlined-outline-color: green
);

@include css-vars($my-button-theme);
```
You have to create a separate theme for each button type and scope it to a CSS selector.
```
<div class="my-raised-btn">

<button igxButton="raised">Raised button</button>

</div>
<div class="my-outlined-btn">

    <button igxButton="outlined">Outlined button</button>

</div>
```
```
$my-raised-button: button-theme(
    $background: red
);

$my-outlined-button: button-theme(
    $border-color: red
);

.my-raised-btn {
    @include css-vars($my-raised-button);
 }

.my-outlined-btn {
    @include css-vars($my-outlined-button);
}
```
As you can see, since the button-theme params now have the same names for each button type, we have to scope our button themes to a CSS selector in order to have different colors for different types.

Here you can see all the available properties of the button-theme

The typography mixin is no longer implicitly included with core. To use our typography styles you have to include the mixin explicitly after core and before theme:

// in styles.scss

@include core();

@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);

@include theme();

The core mixin should always be included first.

For each theme included in Ignite UI for Angular we provide specific font-family and type-scale variables which you can use:

Theme	Font Family	Type Scale
Material	$material-typeface	$material-type-scale
Fluent	$fluent-typeface	$fluent-type-scale
Bootstrap	$bootstrap-typeface	$bootstrap-type-scale
Indigo	$indigo-typeface	$indigo-type-scale

テーマ

重大な変更:
- IgxAvatar テーマが簡略化されました。テーマパラメーター (avatar-theme) の数が大幅に削減され、接頭辞付きのパラメーター (icon-*、initials-*、image-*) と接尾辞付きのパラメーター (border-radius-*) が含まれなくなりました。ng update で実行された更新は、既存のボタンテーマを移行しますが、接頭辞付きと接尾辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
  
  既存のタイプ固有のアバターテーマを以下のように変更する必要があります。
  
  例えば、次の例は
```
$avatar-theme: avatar-theme(
    $initials-background: blue,
    $initials-color: orange,
    $icon-background: blue,
    $icon-color: orange,
);
```

IgxBottomNav コンポーネント

**IgxBottomNavComponent** は、タブヘッダーとコンテンツの定義を、より柔軟な方法を提供するために、リファクタリングされました。既存の igx-bottom-nav 定義を新しい定義に移行するには、ng update を介して更新することをお勧めします。

テンプレート
- *新しい構造は、ヘッダーとコンテンツコンポーネントをそれぞれラップする下部ナビゲーション項目コンポーネントを定義します。ヘッダーには通常、アイコン (マテリアルガイドライン) が含まれていますが、ラベルやその他のカスタムコンテンツが含まれている場合もあります。
- ヘッダーのスタイル設定のために、igxBottomNavHeaderLabel と igxBottomNavHeaderIcon の 2 つの新しいディレクティブを用意しました。
- ヘッダーコンポーネントで任意のコンテンツを追加できるようになったため、以前はタブのヘッダーを再テンプレート化するために使用されていた igxTab ディレクティブは、不要になったため削除されました。
- コンポーネントをナビゲーションシナリオで使用する場合、routerLink ディレクティブをヘッダーコンポーネントにアタッチする必要があります。
```
<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            Content 1
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    ...
</igx-bottom-nav>
```
API 変更
- id、itemStyle、panels、viewTabs、contentTabs、tabs プロパティが削除されました。現在、items プロパティはタブのコレクションを返します。
- 次のプロパティが変更されました。
  - タブ項目の isSelected プロパティの名前が selected に変更されました。
  - selectedTab プロパティの名前が selectedItem に変更されました。
- onTabSelected および onTabDeselected イベントが削除されました。selectedIndexChanging、selectedIndexChange、selectedItemChange の 3 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクトレベルで処理する必要があります。

IgxTabs コンポーネント

**IgxTabsComponent** は、タブヘッダーとコンテンツを定義するためのより柔軟で説明的な方法を提供するために、完全にリファクタリングされました。既存の igx-tabs 定義を新しい定義に変更するには、ng update を介して更新することをお勧めします。

const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;

テンプレート
- 新しい構造は、ヘッダーとコンテンツコンポーネントをそれぞれラップするタブ項目コンポーネントを定義します。ヘッダーには通常、アイコンおよびラベルが含まれていますが、その他のカスタムコンテンツが含まれている場合もあります。
- ヘッダーのスタイル設定のために、igxTabHeaderLabel と igxTabHeaderIcon の 2 つの新しいディレクティブを導入しました。
- ヘッダーコンポーネントで任意のコンテンツを追加できるようになったため、以前はタブのヘッダーを再テンプレート化するために使用されていた igxTab ディレクティブは、不要になったため削除されました。
- コンポーネントをナビゲーションシナリオで使用する場合、routerLink ディレクティブをヘッダーコンポーネントにアタッチする必要があります。
```
<igx-tabs>
    <igx-tab-item>
        <igx-tab-header>
            <igx-icon igxTabHeaderIcon>folder</igx-icon>
            <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
            <h1>Tab 1 Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </igx-tab-content>
    </igx-tab-item>
...
</igx-tabs>
```

grid.getRowByIndex(0).expanded = false;

API 変更
- id、groups、viewTabs、contentTabs、および tabs プロパティが削除されました。現在、items プロパティはタブのコレクションを返します。
- 次のプロパティが変更されました。
  - タブ項目の isSelected プロパティの名前が selected に変更されました。
  - selectedTabItem プロパティは selectedItem に変更されました。
  - contentFit と固定オプションを含む type プロパティは使用できなくなりました。ヘッダーのサイズ設定と配置モードは現在、tabAlignment 入力プロパティによって制御されています。この入力プロパティは、start (デフォルト)、center、end、justify の 4 つのいずれかが設定できます。古い contentFit タイプは現在の start 配置値に対応し、古い fixed タイプは現在の justify 値に対応します。
- tabItemSelected および tabItemDeselected イベントが削除されました。selectedIndexChanging、selectedIndexChange、selectedItemChange の 3 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクトレベルで処理する必要があります。
row property in the event arguments emitted by onRowPinning, and dragData property in the event arguments emitted by onRowDragStart, onRowDragEnd is now implementing RowType
ng update will migrate most of the uses of IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with RowType.
getRowByIndex will now return a RowType object, if the row at that index is a summary row (previously used to returned undefined). row.isSummaryRow and row.isGroupByRow return true if the row at the index is a summary row or a group by row.

IgxGridComponent、IgxTreeGridComponent、IgxHierarchicalGridComponent

IgxGridRowComponent、IgxTreeGridRowComponent、IgxHierarchicalRowComponent、IgxGridGroupByRowComponent はパブリック API で公開されなくなりました。
以前は上記のいずれかのインスタンスを返していたパブリック API は、パブリック RowType インターフェースを実装するオブジェクトを返すようになりました。

RowType のパブリック API は、IgxRowComponent などが公開していたものと同じですが、次の点に注意してください:

IgxHierarchicalRowComponent によって公開される toggle メソッドは使用できません。すべての行タイプに RowType.expanded プロパティを使用します:

*row.rowData_ および row.rowID は非推奨であり、バージョン 13 で完全に削除されます。代わりに row.data と row.key を使用してください。

IgxInputGroupComponent

disabled プロパティは削除されました。入力グループの状態は常に基になる igxInput によって管理されていたため、このプロパティは誤解を招く可能性がありました。
- ng update を実行すると、テンプレートで [disabled] が @Input として使用されたすべてのインスタンスが処理されます。
- .ts ファイルでプロパティを参照している場合:

IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent

IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent の value プロパティは、ISO 8601 文字列形式を受け入れるようになりました。これは、value タイプが date または string である可能性があることを意味します。
IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent の inputFormat プロパティは、年の部分に y を受け入れないようになりました。yy に更新する必要があります。

10.2.x から 11.0.x の場合

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- グリッドでツールバーをインスタンス化される方法が変更されました。グリッドツリーに投影される別個のコンポーネントになりました。したがって、showToolbar プロパティはすべてのグリッドから削除され、グリッド内のツールバーに関連する他のすべてのプロパティは非推奨です。ツールバートピックで説明されているように、ツールバー機能を有効にするための推奨される方法に従うことをお勧めします。
- igxToolbarCustomContent ディレクティブが削除されました。移行により、テンプレートコンテンツがツールバーコンテンツ内に移動しますが、テンプレートバインディングは解決されません。移行後は、必ずテンプレートファイルを確認してください。
- ツールバーコンポーネントの API はリファクタリング中に変更され、古いプロパティの多くが削除されました。残念ながら、これらの変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクトレベルで処理する必要があります。
```
public mySelectedRows = [0, 1, 2];
```
```
<igx-grid [data]="myData" rowSelection="multiple"
    primaryKey="ID" [selectedRows]="mySelectedRows">
    {/* ... */}
</igx-grid>
```

10.0.x から 10.1.x の場合

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- Excel スタイルフィルターメニューを再テンプレート化するための IgxExcelStyleSortingTemplateDirective、IgxExcelStyleHidingTemplateDirective、IgxExcelStyleMovingTemplateDirective、IgxExcelStylePinningTemplateDirective、IgxExcelStyleSelectingTemplateDirective ディレクティブは削除されたため、列操作とフィルター操作領域を再テンプレート化するために新しく追加されたディレクティブ - IgxExcelStyleColumnOperationsTemplateDirective と IgxExcelStyleFilterOperationsTemplateDirective を使用できます。テンプレート内で使用するために、Excel スタイルフィルターメニューのすべての内部コンポーネントも公開しました。新しいテンプレートディレクティブの使用に関する詳細は、このトピックをご覧ください。
IgxGrid
- selectedRows() メソッドは、selectedRows入力プロパティに変更されました。この重大な変更により、ユーザーは実行時にグリッドの選択状態を簡単に変更できます。行の事前選択もサポートされています。selectedRows() メソッドが呼び出されるすべてのインスタンスは、括弧なしで書き換える必要があります。
- selectedRows 入力のバインディングは次のようになります:
```
public mySelectedRows = [0, 1, 2];
```
```
<igx-grid [data]="myData" rowSelection="multiple"
    primaryKey="ID" [selectedRows]="mySelectedRows">
    
</igx-grid>
```
  alarm item text
```
```scss
  .my-styles {
      display: flex;
      align-items: center;
  
      span {
        margin-left: 8px;
      }
  }
```

9.0.x から 10.0.x の場合

IgxDropdown
- ドロップダウン項目の表示プロパティが flex から block に変更されました。これは、切り捨てられたテキストをデフォルトで有効にするために行われました。この変更により、ドロップダウン項目のコンテンツにテキスト以外のものが含まれる場合、レイアウトはアプリケーションレベルで処理する必要があります。
- 次の例は、アイコンとテキストコンテンツでドロップダウンアイテムをスタイルし、垂直配置させる方法を示しています。
```
<igx-drop-down-item>
    <div class="my-styles">
        <igx-icon>alarm</igx-icon>
        <span>item text</span>
    </div>
</igx-drop-down-item>
```
```
.my-styles {
    display: flex;
    align-items: center;
```

import { HammerModule } from "@angular/platform-browser";

@NgModule({
    ...
    imports: [
        ...
        HammerModule
    ]
})

AvatarType.DEFAULT -> IgxAvatarType.CUSTOM
Type.DEFAULT -> IgxBadgeType.PRIMARY
IgxCardType.DEFAULT -> IgxCardType.ELEVATED
IgxCardActionsLayout.DEFAULT -> IgxCardActionsLayout.START
IgxDividerType.DEFAULT -> IgxDividerType.SOLID
IgxProgressType.DANGER -> IgxProgressType.ERROR

The ng update process will update all enumeration names, like AvatarType, Type, et al. to IgxAvatarType and IgxBadgeType, respectively. All other enumeration member names remain unchanged.

8.x.x から 9.0.x の場合

Angular 9 の重大な変更により、Hammer プロバイダーは暗黙的に追加されていません。詳細はを参照してください。このため、以下のコンポネントのタッチ操作が正しく動作するには、アプリケーションのルートモジュールに HammerModule をインポートする必要があります。

igxGrid
igxHierarchicalGrid
igxTreeGrid
igxList
igxNavigationDrawer
igxTimePicker
igxDatePicker
igxMonthPicker
igxSlider*
igxCalendar
igxCarousel

* 注 - igxSlider のすべてのユーザー操作には HammerModule が必要です。

以下のコードスニペットでアプリのルートモジュールファイルを更新できます。

エクスポートで名前が変更された Enumeration があるため、メンバーを手動で更新する必要があります。以下は、手動の更新が必要なすべての変更のリストです。

AvatarType.DEFAULT -> IgxAvatarType.CUSTOM
Type.DEFAULT -> IgxBadgeType.PRIMARY
IgxCardType.DEFAULT -> IgxCardType.ELEVATED
IgxCardActionsLayout.DEFAULT -> IgxCardActionsLayout.START
IgxDividerType.DEFAULT -> IgxDividerType.SOLID
IgxProgressType.DANGER -> IgxProgressType.ERROR

ng update プロセスは、AvatarType、Type などのすべての列挙名を IgxAvatarType と IgxBadgeType にそれぞれ更新します。その他の列挙メンバー名は変更されません。

IgxDrop
- Due to the default drop strategy provided with the IxgDrop directive is no longer applied by default, in order to continue having the same behavior, you need to set the new input dropStrategy to be the provided IgxAppendDropStrategy implementation.
```
<div igxDrop [dropStrategy]="appendStrategy"></div>
```
```
import { IgxAppendDropStrategy } from 'igniteui-angular';
// import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package

public appendStrategy = IgxAppendDropStrategy;
```
- Any use of interfaces IgxDropEnterEventArgs and IgxDropLeaveEventArgs should be replaced with IDragBaseEventArgs.
- Also any use of the IgxDropEventArgs interface should be replaced with IDropDroppedEventArgs.
IgxRowDragDirective
- IRowDragStartEventArgs and IRowDragEndEventArgs have argument’s name changed in order to be more clear to what it relates to. owner argument is renamed to dragDirective. The owner argument now provides a reference to the owner component. If your code was like:
```
public dragStart(event) {
    const directive = event.owner;
}
```
  From version 8.2.x it should be updated to:
```
public dragStart(event) {
    const directive = event.dragDirective;
    const grid = event.owner;
}
```

IgxCombo

The way that the igx-combo handles selection and data binding is changed.

If the combo’s [valueKey] input is defined, the control will look for that specific property in the passed array of data items when performing selection. All selection events are handled with the value of the data items’ valueKey property. All combos that have valueKey specified should have their selection/two-way binding consist only of the values for the object property specified in the input:

<igx-combo [data]="cities" valueKey="id" displayKey="name"></igx-combo>

export class MyExampleCombo {
    public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
    ...
    selectFavorites() {
        // Selection is handled with the data entries' id properties
        this.combo.selectItems(['UK01', 'BG01']);
    }
}

If the combo does not have a valueKey defined, all selection events are handled with equality (===). All combos that do not have a valueKey specified should have their selection/two-way binding handled with references to their data items:

<igx-combo [data]="cities" displayKey="name"></igx-combo>

export class MyExampleCombo {
    public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
    ...
    selectFavorites() {
        // Selection is handled with references to the data entries
        this.combo.selectItems([this.data[0], this.data[1]]);
    }
}

You can read more about setting up the combo in the readme and in the official documentation.

8.1.x から 8.2.x の場合

IgxDrag
- hideBaseOnDrag と visible 入力は非推奨のため、アプリケーションで同じ機能を実現するために、Angular が提供する基本要素を非表示にする任意の方法を使用できます。1 つの例として、可視性スタイルの非表示設定があります。これは、非表示にして DOM で使用するスペースを保持するためです。

<igx-grid #grid [data]="data" [paging]="true" [perPage]="10" [paginationTemplate]="pager">
</igx-grid>
<ng-template #pager>
    <div class="pagination-container"></div>
</ng-template>

.pagination-container {
 display: flex;
 justify-content: center;
 align-items: center;
}

8.0.x から 8.1.x の場合

igx-paginator コンポーネントはスタンドアロンコンポーネントとして導入され、Grid コンポーネントでも使用されます。 paginationTemplate を設定している場合は、CSS を変更してページネーションを正しく表示する必要がある場合があることに注意してください。これは、コンテンツをセンタリングするための CSS ルールを持つページング固有のコンテナーの下にテンプレートが適用されなくなったため、手動で追加する必要がある場合があるためです。以下はスタイルの例です。

7.3.x から 8.0.x の場合

アップデート中に以下のエラーが発生した場合、パッケージ "@angular/compiler-cli" は "typescript" と互換性のないピア依存関係を持っているため (">=3.1.1 <3.3" が必要で、"3.4.5" をインストールします。)、最初に @angular/core パッケージを更新する必要があります。このエラーは Angular CLI の既知の問題に関連しています
igniteui-angular パッケージの更新中に次のエラーが表示された場合、パッケージ "igniteui-angular" は "web-animations-js" と互換性のないピア依存関係を持っているため ("^2.3.1" が必要で、"2.3.2-pr208" をインストールします。)、ng update igniteui-angular --force を使用して更新する必要があります。これは、igniteui-angular を更新する前に @angular/core と @angular/cli を更新した場合に発生する場合があります。

7.2.x または 7.3.x から 7.3.4 の場合

IgxGrid、IgxTreeGrid、または IgxHierarchicalGrid メソッドを使用する場合は、condition パラメーターがオプションではなくなったことに注意してください。filterGlobal メソッドが無効な条件で呼び出されると、すべての列の既存のフィルターは消去されません。

7.1.x から 7.2.x の場合

combo.value と一緒に IgxCombo を使う場合、combo.value が唯一のゲッターであることに注意してください。
IgxTextHighlightDirective を使用している場合、page 入力プロパティは推奨されません。IActiveHighlightInfo インターフェイスの rowIndex、columnIndex、page プロパティも非推奨です。代わりに、行と列のオプションプロパティが追加されています。
button-theme を使用する場合は、ボタンの種類ごとに $button-roundness が $flat-border-radius、$raised-border-radius、$outline-border-radius、$fab-border-radius、$icon-border-radius で置き換えられることに注意してください。

Before version 7.1:

export class CustomSummary extends IgxNumberSummaryOperand {
 public operate(data?: any[]): IgxSummaryResult[] {
  return [{
   key: 'average',
   label: 'average',
   summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
  }];
 }
}

Since version 7.1:

export class CustomSummary extends IgxNumberSummaryOperand {
 public operate(data?: any[]): IgxSummaryResult[] {
  return [{
   key: 'average',
   label: 'average',
   summaryResult: data.length ?  IgxNumberSummaryOperand.average(data).toFixed(2) : null
  }];
 }
}

7.0.x から 7.1.x

アプリケーションで IgxGrid の集計を使用する場合、IgxSummaryOperand.operate() メソッドがからデータとともに順番に呼び出されて集計行に必要な高さを計算します。カスタム集計オペランドは、メソッドが常に適切な長さの IgxSummaryResult の配列を返します。

アップデート ガイド

その他の手動の変更

21.0.x から 21.1.x の場合

20.x から 21.0.x の場合

マルチ エントリ ポイントのサポート

依存性注入のリファクタリング

17.2.x から 18.0.x の場合

重大な変更

一般

重大な変更

17.0.x から 17.1.x の場合

一般

重大な変更

16.1.x から 17.0.x の場合

一般

重大な変更

16.0.x から 16.1.x の場合

一般

互換性のある変更

15.1.x から 16.0.x の場合

15.0.x から 15.1.x の場合

14.2.x から 15.0.x の場合

一般

Example

テーマ

タイポグラフィ

エレベーション

グリッド ツールバー

13.1.x から 13.2.x の場合

テーマ

13.0.x から 13.1.x の場合

一般

12.2.x から 13.0.x の場合

一般

テーマ

12.0.x から 12.1.x の場合

グリッド

IgxGridCell の移行

テーマ

ソリューション

11.1.x から 12.0.x の場合

テーマ

IgxBottomNav コンポーネント

IgxTabs コンポーネント

IgxGridComponent、IgxTreeGridComponent、IgxHierarchicalGridComponent

IgxInputGroupComponent

IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent

10.2.x から 11.0.x の場合

10.0.x から 10.1.x の場合

9.0.x から 10.0.x の場合

8.x.x から 9.0.x の場合

8.1.x から 8.2.x の場合

8.0.x から 8.1.x の場合

7.3.x から 8.0.x の場合

7.2.x または 7.3.x から 7.3.4 の場合

7.1.x から 7.2.x の場合

7.0.x から 7.1.x

アップデートガイド

マルチエントリポイントのサポート

グリッドツールバー