アップデート ガイド
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
Note
パッケージの依存関係の不一致が原因で ng update
コマンドが失敗した場合は、アップデートを元に戻し、node_modules
フォルダを削除してから、--force
フラグを指定してアップデートを再実行します。
その他の手動の変更
自動的にアップデートできない変更もあります。以下の変更はバージョンごとにセクションが分かれています。アッププデートが必要な場合は、現在のバージョンから開始してそれ以降のアップデートを適用しjます。
例: 6.2.4 から 7.1.0 にアップデートする場合、[6.x .. から] セクションから始めて変更を適用していきます。
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
プロパティを使用した場合は、次のように更新する必要があります。
// version 17.0.x
<button igxButton="icon" [igxButtonBackground]="'red'">
<igx-icon fontSet="material">search</igx-icon>
</button>
// version 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
を実行します。
重大な変更
IgxCombo
のIComboSelectionChangingEventArgs
型のselectionChanging
イベント引数には次の変更があります。newSelection
とoldSelection
プロパティは、その機能をより適切に反映するために、それぞれnewValue
とoldValue
に名前変更されました。Combo のvalue
と同様に、これらはvalueKey
が設定されているかどうかに応じて、指定されたプロパティ値または完全なデータ項目を出力します。自動移行が利用可能で、ng update
時に適用されます。- 2 つの新しいプロパティ (
newSelection
とoldSelection
) が、valueKey
の影響を受けなくなった古いプロパティの代わりに公開され、一貫して Combo のdata
から項目を出力します。 added
とremoved
プロパティには、設定されているvalueKey
に関係なく、常にデータ項目が含まれるようになりました。これにより、更新されたnewSelection
プロパティとoldSelection
プロパティが調整されます。
selectionChanging
イベント ハンドラーのコードがイベント引数からの valueKeys
の読み取りに依存していた場合は、次のように更新します。
// 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
は削除されました。getCurrentResourceStrings
は削除されました。- 例: EN 文字列は
igniteui-angular
:import { GridResourceStringsEN } from 'igniteui-angular';
から取得されます。 - 例: DE または他の言語文字列は
igniteui-angular-i18n
:import { GridResourceStringsDE } from 'igniteui-angular-i18n';
から取得されます。
使用例は、更新されたローカライズ (i18n) ドキュメントにあります。
- 例: EN 文字列は
16.0.x から 16.1.x の場合:
一般
互換性のある変更
- コンポーネントのサイズを設定する方法として
DisplayDensityToken
インジェクション トークンを廃止し、CSS カスタム プロパティを使用する、よりシンプルで堅牢な方法を採用しています。そのため、DisplayDensityToken
インジェクション トークンは非推奨になりました。これは、displayDensity
入力プロパティを公開するすべてのコンポーネントに影響を与えます。トークンと入力プロパティは 17.0.0 で削除されます。次のことを行うことをお勧めします。
DisplayDensityToken
が提供されているすべての宣言を削除します:
// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],
displayDensity
入力プロパティへのすべてのバインディングまたはプログラムによる割り当てを削除します:
<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>
代わりに、カスタム CSS プロパティ --ig-size
を使用して、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>
@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);
}
- 16.0.x では、グリッド メソッド
getCellByColumnVisibleIndex(rowIndex:number,index:number)
が削除されました。代わりに、getCellByKey(rowSelector: any, columnField: string)
またはgetCellByColumn(rowIndex: number, columnField: string)
を使用します。例:
// prior version 16.0.x
const cell = grid.getCellByColumnVisibleIndex(rowIndex, columnIndex);
// after version 16.0.x
const rowKey = grid.getRowByIndex(rowIndex).key;
const columnField = grid.getColumnByVisibleIndex(columnIndex).field;
const cell = grid.getCellByKey(rowKey, columnField);
const cell = grid.getCellByColumn(rowIndex, columnField);
15.0.x から 15.1.x の場合:
- 重大な変更
rowSelectionChanging
引数の型が変更されます。IRowSelectionEventArgs
インターフェイスの一部であるoldSelection
、newSelection
、added
、およびremoved
コレクションは、選択された要素の行キーでではなく (グリッドに PrimaryKey を設定している場合)、いずれの場合も行データが出力されます。グリッドがリモート データを操作しており、primaryKey
が設定されている場合、現在グリッド ビューの一部ではない選択された行に対しては、部分的な行データ オブジェクトが出力されます。
rowSelectionChanging
イベント ハンドラーのコードがイベント引数からの primaryKeys の読み取りに依存していた場合は、次のように更新します。
// prior version 15.1.x
public handleRowSelection(e: IRowSelectionEventArgs): void {
this.selectedRows = e.newSelection;
}
// after version 15.1.x
public handleRowSelection(e: IRowSelectionEventArgs): void {
this.selectedRows = e.newSelection.map(rec => {
return rec[e.owner?.primaryKey]
});
}
動作の変更 選択した行がグリッド コンポーネントから削除された場合、
rowSelectionChanging
イベントは発行されません。視覚的な変更
15.1 では、入力コンポーネントのサイズが大きくなりました。これは、Material テーマを使用するとより明瞭になります。これは、Material 仕様に一致するように行います。アプリケーションが変更によって悪影響を受ける場合は、displayDensity 入力を使用して、より密度の高い設定に設定できます (comfortable から cozy まで、または cozy から compact まで)。
例
<igx-input-group displayDensity="cosy">
...
</igx-input-group>
<igx-select displayDensity="cosy">
...
</igx-select>
<igx-combo displayDensity="cosy">
</igx-combo>
<igx-simple-combo displayDensity="cosy">
...
</igx-simple-combo>
15.1 では、Select および Combo コンポーネントのトグル アイコンの周りに背景が表示されるようになりました。scss または css を使用して、背景とアイコンの色を変更できます。
例
$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);
**例**
.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;
}
14.2.x から 15.0.x の場合:
一般
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; }
テーマ
重大な変更 -
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 以降:
$my-palette: palette( $primary: #09f, $secondary: #e41c77, $gray: #000 ); .my-class { background: color($color: 'gray', $variant: 300); color: contrast-color($color: 'gray', $variant: 300); border-color: hsl(var(--ig-gray-500)); }
重大な変更 - パレットの CSS 変数の生成は palette-vars ミックスイン の代わりに palette ミックスイン によって実行されます。
重大な変更 - palette 関数はサーフェイス カラーを渡す必要がありますが、
gray
カラーの値を渡すのはオプションです。グレー基本カラーの値が提供されない場合、サーフェイス カラーの明度に基づいて自動的に生成されます。明るいサーフェイス カラーは black (#000) グレー基本カラーになり、暗いサーフェス カラーは white (#fff) 基本グレー色。パレットを生成する場合、info、success、error、および warn カラーのデフォルト値がないことに注意してください。使用する場合は明示的に設定する必要があります。値を自分で考えたくない場合は、既存のパレットからこれらのカラーを取得することもできます。例:
$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);
重大な変更 - **パレット パラメーターはすべてのコンポーネント テーマから削除されました。**palette ミックスイン を使用して、カスタム コンポーネントのコンポーネント テーマのカスタム パレットをスコープできます。IE11 のサポートを終了したため、すべてのコンポーネントテーマはカラー、高さ、タイポグラフィなどのグローバル CSS 変数を参照するため、カスタム パレットをコンポーネント テーマに渡す必要はなくなりました。
カスタム パレットでカスタムテーマを生成する場合:
// 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); } }
タイポグラフィ
重大な変更 - 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); }
グリッド ツールバー
重大な変更 -
IgxGridToolbarTitleDirective
とIgxGridToolbarActionsDirective
はコンポーネントに変換され、要素セレクターのみが保持されます。<igx-grid-toolbar-title>
および<igx-grid-toolbar-actions>
の優先要素マークアップを使用するアプリの場合、機能的な変更はありません。他の要素でigxGridToolbarTitle
およびigxGridToolbarActions
ディレクティブを使用するアプリは、代わりにそれらを前述の要素に変換する必要があります。From:
<igx-grid-toolbar> <span igxGridToolbarTitle>Title</span > <div igxGridToolbarActions> ... </div> </igx-grid-toolbar>
To:
<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 の場合:
テーマ
- 重大な変更 - RTL 固有のスタイル シートはすべて削除されました。Ignite UI テーマは、デフォルトで RTL 方向をサポートするようになりました。以前に
*-rtl.css
固有のテーマを使用したことがあるユーザーは、通常のテーマ ファイルに切り替える必要があります。
13.0.x から 13.1.x の場合:
一般
igxGrid
、igxHierarchicalGrid
、igxTreeGrid
- 重大な変更 - 列の
movable
プロパティは非推奨になりました。代わりに、公開されたグリッドのmoving
プロパティを使用してください:
<igx-grid [moving]="true"> </igx-grid>
- 重大な変更 - 列の
IgxHierarchicalGrid
- 重大な変更 - igxHierarchicalGrid および igxRowIsland コンポーネントのパブリック API サービス
hgridAPI
はgridAPI
に名前が変更されました。
- 重大な変更 - igxHierarchicalGrid および igxRowIsland コンポーネントのパブリック API サービス
IgxToast
- 重大な変更 -
igx-toast
で非推奨になったposition
プロパティは削除されました。次のようにpositionSettings
プロパティを使用することをお勧めします:
@ViewChild('toast', { static: true }) public toast: IgxToastComponent; public ngOnInit(): void { this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle; }
- 重大な変更 -
12.2.x から 13.0.x の場合:
一般
IE のサポート終了
IgxDialog
- 重大な変更 - デフォルトの positionSettingsopenclose アニメーションが
fadeIn
/fadeOut
に変更されました。
- 重大な変更 - デフォルトの positionSettingsopenclose アニメーションが
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
の列にアクセスします。@ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) public columns: QueryList<IgxColumnComponent>;
重大な変更 - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに
IGX_GRID_BASE
トークンを注入します。<igx-grid customDirective ...></igx-grid>
@Directive({ selector: '[customDirective]' }) export class customDirective { constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
RowDirective
、RowType
- 重大な変更 -
rowData
およびrowID
プロパティは、RowDirective
およびRowType
インターフェイスを実装するクラスから削除されます。代わりにdata
とkey
を使用してください。自動移行にはng update
を使用します。自動移行では、テンプレート コンテキスト オブジェクトが入力されていないテンプレートからから一部の例を取得できません。
このようなテンプレートを手動で更新します:<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>
- 重大な変更 -
igxGrid
sortStrategy
と同様に機能するgroupStrategy
入力を公開し、グリッドのグループ化動作をカスタマイズできるようにしました。
IgxCsvExporterService
、IgxExcelExporterService
- エクスポーター サービスはルート レベルで注入されるようになったため、アプリケーションで提供する必要がなくなりました。
IgxGridToolbarPinningComponent
、IgxGridToolbarHidingComponent
- ツールバーのドロップダウン ボタン内に表示されるテキストを設定する新しい入力
buttonText
を公開しました。
- ツールバーのドロップダウン ボタン内に表示されるテキストを設定する新しい入力
IgxCombo
- グループのソート順序を設定できる
groupSortingDirection
入力が追加されました。
- グループのソート順序を設定できる
IgxGrid
、IgxTreeGrid
、IgxHierarchicalGrid
- ヘッダー ソート インジケーターを再テンプレート化するための新しいディレクティブを追加しました -
IgxSortHeaderIconDirective
、IgxSortAscendingHeaderIconDirective
、およびIgxSortDescendingHeaderIconDirective
。
- ヘッダー ソート インジケーターを再テンプレート化するための新しいディレクティブを追加しました -
IgxDialog
- 開いたときに Tab キーのフォーカスをダイアログ内にトラップするかどうかを設定する
focusTrap
入力を追加しました。デフォルトはtrue
です。 - 重大な変更 - 次の入力が削除されました:
columns
入力。代わりにigxGrid``columns
入力を使用してください。
- 開いたときに Tab キーのフォーカスをダイアログ内にトラップするかどうかを設定する
IgxCarousel
- 重大な変更 - カルーセル アニメーション タイプ
CarouselAnimationType
はHorizontalAnimationType
に名前が変更されました。
- 重大な変更 - カルーセル アニメーション タイプ
IgxGridStateDirective
-disableHiding
列プロパティと列グループをサポートするようになりました。
テーマ
- Icon コンポーネントの
color
プロパティは非推奨になりました。style.color
CSS プロパティを使用して、デフォルトの色を変更します。例:
<igx-icon [style.color]="'#e41c77'">home</igx-icon>
<igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>
- Sass モジュール:
テーマ エンジンは Sass モジュールに切り替わりました。この変更は、すべてのテーマ ライブラリ関数 (コンポーネント テーマなど)、ミックスイン (コンポーネント ミックスインなど)、および変数が単一ファイルから
転送される
ことを意味します。Sass テーマ ライブラリを正しく使用するには、プロジェクトで Dart Sass バージョン 1.33.0 以降を使用し、テーマ ライブラリのすべてのインポートを以下から変更する必要があります。
// free version
@import '~igniteui-angular/lib/core/styles/themes/index';
// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';
結果:
// free version
@use 'igniteui-angular/theming' as *;
// licensed version:
@use '@infragistics/igniteui-angular/theming' as *;
テーマ ライブラリ全体を一度だけインポートし、アプリ内の他の Sass ファイルで使用する場合は、転送する必要があります。インポートされた Sassフ ァイルは自動的に転送されません。
次から:
// _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';
次へ:
// _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 *;
- パレットとスキーマ:
- CSS パレット変数は HEX 値を参照しなくなり、代わりに H、S、L の 3 つの値のリストを表します。つまり、
hsl
またはhsla
CSS 関数に渡す必要があります。
次から:
.some-class {
background: var(--igx-surface-500); // returns HEX color
}
次へ:
.some-class {
background: hsl(var(--igx-surface-500)); // returns a list of H, S, L
}
これは、CSS 変数のみを使用して実行時にパレットを変更できるようにするためです。このようにして、指定したパレット色のアルファ チャネルを実行時に基本色に影響を与えることなく変更できます。
- 正しいパレットとコンポーネント スキーマがカスタム コンポーネントとグローバルテーマに渡されることを確認してください。グローバル暗いテーマを作成する場合、グレー色に明るい色合いを選択してください。例:
$my-dark-palette: palette(
$primary: olive,
$secondary: yellow,
$grays: #fff
);
@include dark-theme($palette: $my-dark-palette);
同様に、明るいテーマはより暗い灰色の色調と明るいカラー スキーマを必要とします。
グローバル テーマからコンポーネント テーマを除外していないが、css-vars
ミックスインを使用してカスタム置換テーマを作成する場合、テーマが正しいパレットと対応するスキーマに渡されることを確認してください。
$my-custom-grid: grid-theme(
$palette: $my-dark-palette,
$schema: $dark-schema
);
@include css-vars($my-custom-grid);
- 除外されたコンポーネント テーマ:
グローバル テーマからコンポーネント テーマを除外し、カスタム置換テーマを作成した場合、コンポーネント ミックスインが含まれ、正しいコンポーネント テーマが渡されることを確認してください。
$my-dark-palette: palette(
...
$exclude: ('igx-grid')
);
$my-custom-grid: grid-theme(
$palette: $my-dark-palette,
$schema: $dark-schema
);
// Ensure grid is included:
@include grid($my-custom-grid);
カスタム コンポーネント テーマがグローバル styles.scss
以外の別のコンポーネント Sass ファイルで宣言されている場合は、core
ミックスインも含まれていることを確認してください。
// 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);
Sass Moule システムについて理解を深めるために、Miriam Suzanne の記事 (英語) を参照ください。
12.0.x から 12.1.x の場合:
グリッド
重大な変更:
IgxPaginatorComponent
- グリッドでページネーターがインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、[paging]="true"
プロパティはすべてのグリッドから削除され、グリッド内のページネーターに関連する他のすべてのプロパティは非推奨です。ページング トピックで説明されているように、Grid Paging
機能を有効にするためのガイドに従うことをお勧めします。IgxPageSizeSelectorComponent
およびIgxPageNavigationComponent
が導入され、カスタム コンテンツの実装が容易になりました。
<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>
- ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。
- 次のプロパティはグリッドから非推奨になりました:
- paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone
- 次のメソッドも非推奨です:
- nextPage()
- previousPage()
- 次のプロパティが削除されました:
- paginationTemplate - カスタム テンプレートを定義するには、
igx-paginator-content
を使用します。
- paginationTemplate - カスタム テンプレートを定義するには、
- 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> <igx-paginator></igx-paginator> </igx-hierarchical-grid>
- 移行によりテンプレート コンテンツが
igx-paginator-content
コンテンツ内に移動しますが、すべてのテンプレート バインディングが解決されるとは限りません。移行後は、必ずテンプレート ファイルを確認してください。次のバインディングは、これらのプロパティ (pagerEnabled
、pagerHidden
、dropdownEnabled
、dropdownHidden
) が削除されているため、手動で変更する必要があります:
次から:
<igx-paginator #paginator [pagerEnabled]="!isPagerDisabled" [pagerHidden]="isPagerHidden" [dropdownHidden]="isDropdownHidden"> </igx-paginator>
次へ:
<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 はパブリック API で公開されなくなりました。新しい
IgxGridCell
へのアップグレードの詳細ガイドについては、以下のセクションを参照してください。
グリッド非推奨:
IgxGridTransaction
を提供するための DI パターンは非推奨になりました。以下は引き続き機能しますが、将来のバージョンで削除される可能性があるため、リファクタリングすることをお勧めします。
@Component({ template: `<igx-grid [data]="data"> ... </igx-grid>`, providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }], ... }) export class MyCustomComponent { ... }
上記の動作を実現するには、新しく追加された
一括編集
入力を使用する必要があります。@Component({ template: `<igx-grid [data]="data" [batchEditing]="true"> ... </igx-grid>` ... }) export class MyCustomComponent { ... }
getCellByColumnVisibleIndex
は非推奨になり、次のメジャー バージョンで削除される予定です。代わりにgetCellByKey
、getCellByColumn
を使用してください。
IgxGridCell の移行
IgxGridCellComponent、IgxTreeGridCellComponent、IgxHierarchicalGridCellComponent、IgxGridExpandableCellComponent はパブリック API で公開されなくなりました。
上記のいずれかのインスタンスを返すために使用されていたパブリック API は、
IgxGridCell
のインスタンスを返すようになりました。
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[]
- cellClick、selected、contextMenu、および doubleClick イベントによって発行される
IGridCellEventArgs
イベント引数のcell
プロパティは、IgxGridCell
のインスタンスになりました。 - セル テンプレートの
let-cell
プロパティはIgxGridCell
になりました。 getCellByColumnVisibleIndex
は非推奨になり、次のメジャー バージョンで削除される予定です。代わりにgetCellByKey
、getCellByColumn
を使用してください。
ご注意ください:
ng update は、IgxGridCellComponent、IgxTreeGridCellComponent、IgxHierarchicalGridCellComponent、IgxGridExpandableCellComponent のインポート、入力、キャストなどの使用方法を移行します。上記のいずれかを使用するコード内の場所が移行されない場合は、入力/キャストを削除するか、IgxGridCell
で変更してください。
- getCellByIndex およびその他のメソッドは、そのインデックスの行がデータ行ではなく、IgxGroupByRow、IgxSummaryRow、詳細行などである場合、undefined を返します。
テーマ
コンパイルの警告に関する苦情 (#9793 を参照) のため、math.div
関数を使用するようになりました。この機能は、バージョン 1.33.0 以降の Dart Sass (英語) でサポートされています。
ソリューション
何らかの理由で math.div
が既知の関数ではないという Sass コンパイル エラーが表示された場合は、プロジェクトで古いバージョンの Sass を使用していることを意味します。
ng update
を使用して Angular の最新バージョンに更新します - Angular 12.1.0 以降はデフォルトで dart-sass コンパイラーを使用します。
ng update [options]
何らかの理由で Ignite UI/Angular CLI を使用しない場合は、Node プロジェクトで node-sass
を sass
に置き換える必要があります。
npm uninstall node-sass
npm install sass --save-dev
- 何らかの理由で、上記の方法を使用して Angular の最新バージョンにアップグレードできない場合は、Sass ファイルにグローバル フラグを設定することで、古い Sass 除算方法にフォールバックできます。
$__legacy-libsass: true;
11.1.x から 12.0.x の場合:
テーマ:
重大な変更:
IgxAvatar
テーマが簡略化されました。テーマ パラメーター (avatar-theme
) の数が大幅に削減され、接頭辞付きのパラメーター (icon-*
、initials-*
、image-*
) と接尾辞付きのパラメーター (border-radius-*
) が含まれなくなりました。ng update
で実行された更新は、既存のボタン テーマを移行しますが、接頭辞付きと接尾辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
既存のタイプ固有のアバター テーマを以下のように変更する必要があります。
例えば、次の例は
```scss $avatar-theme: avatar-theme( $initials-background: blue, $initials-color: orange, $icon-background: blue, $icon-color: orange, ); @include avatar($avatar-theme); ```
このとおりに変換する必要があります。
```scss $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
テーマが簡略化されました。テーマ パラメーター (button-theme
) 数が大幅に削減され、接頭辞付きのパラメーター (flat-*
、raised-*
など) が含まれなくなりました。ng update
で実行された更新は、既存のボタン テーマを移行しますが、接頭辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
以下のコード スニペットと同じ結果を得るには:
```html <button igxButton="raised">Raised button</button> <button igxButton="outlined">Outlined button</button> ``` ```scss $my-button-theme: button-theme( $raised-background: red, $outlined-outline-color: green ); @include css-vars($my-button-theme); ```
ボタン タイプごとに個別のテーマを作成し、CSS セレクターにスコープする必要があります。
html <div class="my-raised-btn"> <button igxButton="raised">Raised button</button> </div> <div class="my-outlined-btn"> <button igxButton="outlined">Outlined button</button> </div>
```scss $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); } ```
ご覧のとおり、button-theme
パラメーターはボタン タイプごとに同じ名前になっているため、タイプごとに異なる色を使用するには、ボタン テーマのスコープを CSS セレクターに設定する必要があります。
ここでは、button-theme
のすべての利用可能なプロパティを確認できます。
typography
ミックスインはcore
に暗黙的に含まれなくなりました。タイポグラフィ スタイルを使用するには、core
の後とtheme
の前に ミックスインを明示的に含める必要があります。// in styles.scss @include core(); @include typography( $font-family: $material-typeface, $type-scale: $material-type-scale ); @include theme();
Important
core
ミックスインは常に最初に含める必要があります。Ignite UI for Angular に含まれるテーマごとに、使用できる特定の
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
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 を介して更新することをお勧めします。
テンプレート
- 新しい構造は、ヘッダーとコンテンツ コンポーネントをそれぞれラップするタブ項目コンポーネントを定義します。ヘッダーには通常、アイコンおよびラベルが含まれていますが、その他のカスタム コンテンツが含まれている場合もあります。
- ヘッダーのスタイル設定のために、
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>
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 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
IgxGridComponent、IgxTreeGridComponent、IgxHierarchicalGridComponent
- IgxGridRowComponent、IgxTreeGridRowComponent、IgxHierarchicalRowComponent、IgxGridGroupByRowComponent はパブリック API で公開されなくなりました。
- 以前は上記のいずれかのインスタンスを返していたパブリック API は、パブリック
RowType
インターフェースを実装するオブジェクトを返すようになりました。
const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;
RowType
のパブリック API は、IgxRowComponent などが公開していたものと同じですが、次の点に注意してください:
- IgxHierarchicalRowComponent によって公開される toggle メソッドは使用できません。すべての行タイプに
expanded
プロパティを使用します:
grid.getRowByIndex(0).expanded = false;
row.rowData および row.rowID は非推奨であり、バージョン 13 で完全に削除されます。代わりに row.data と row.key を使用してください。
- onRowPinning によって発行されたイベント引数の row プロパティ、および onRowDragStart によって発行されたイベント引数の dragData プロパティ、onRowDragEnd は
RowType
を実装しています。 - ng update は、IgxGridRowComponent、IgxTreeGridRowComponent、IgxHierarchicalRowComponent、IgxGridGroupByRowComponent のインポート、入力、キャストなどの使用方法のほとんどが移行されます上記のいずれかを使用するコード内の場所が移行されない場合は、入力/キャストを削除するか、
RowType
で変更してください。 - getRowByIndex は、そのインデックスの行が集計行である場合、
RowType
オブジェクトを返すようになりました (以前は undefined を返していました)。row.isSummaryRow および row.isGroupByRow は、インデックスの行が集計行またはグループ行の場合に true を返します。
IgxInputGroupComponent
disabled
プロパティは削除されました。入力グループの状態は常に基になるigxInput
によって管理されていたため、このプロパティは誤解を招く可能性がありました。ng update
を実行すると、テンプレートで[disabled]
が@Input
として使用されたすべてのインスタンスが処理されます。.ts
ファイルでプロパティを参照している場合:
export class CustomComponent { public inputGroup: IgxInputGroupComponent ... this.inputGroup.disabled = false; }
基になる入力ディレクティブの
disabled
プロパティを参照するように、コードを手動で更新する必要があります:export class CustomComponent { public input: IgxInputDirective ... this.input.disabled = false; }
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 はリファクタリング中に変更され、古いプロパティの多くが削除されました。残念ながら、これらの変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
- グリッドでツール バーをインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、
10.0.x から 10.1.x の場合:
- IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- Excel スタイル フィルター メニューを再テンプレート化するための
IgxExcelStyleSortingTemplateDirective
、IgxExcelStyleHidingTemplateDirective
、IgxExcelStyleMovingTemplateDirective
、IgxExcelStylePinningTemplateDirective
、IgxExcelStyleSelectingTemplateDirective
ディレクティブは削除されたため、列操作とフィルター操作領域を再テンプレート化するために新しく追加されたディレクティブ -IgxExcelStyleColumnOperationsTemplateDirective
とIgxExcelStyleFilterOperationsTemplateDirective
を使用できます。テンプレート内で使用するために、Excel スタイル フィルター メニューのすべての内部コンポーネントも公開しました。新しいテンプレートディレクティブの使用に関する詳細は、このトピックをご覧ください。
- Excel スタイル フィルター メニューを再テンプレート化するための
- IgxGrid
selectedRows()
メソッドは、selectedRows
入力プロパティに変更されました。この重大な変更により、ユーザーは実行時にグリッドの選択状態を簡単に変更できます。行の事前選択もサポートされています。selectedRows()
メソッドが呼び出されるすべてのインスタンスは、括弧なしで書き換える必要があります。selectedRows
入力のバインディングは次のようになります:
public mySelectedRows = [0, 1, 2];
<igx-grid [data]="myData" rowSelection="multiple" primaryKey="ID" [selectedRows]="mySelectedRows"> <!-- ... --> </igx-grid>
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; span { margin-left: 8px; } }
8.x.x から 9.0.x の場合:
Angular 9 の重大な変更により、Hammer プロバイダー は暗黙的に追加されていません
詳細はを参照してください。このため、以下のコンポネントのタッチ操作が正しく動作するには、アプリケーションのルート モジュールに HammerModule
をインポートする必要があります。
- igxGrid
- igxHierarchicalGrid
- igxTreeGrid
- igxList
- igxNavigationDrawer
- igxTimePicker
- igxDatePicker
- igxMonthPicker
- igxSlider*
- igxCalendar
- igxCarousel
* 注 - igxSlider のすべてのユーザー操作には HammerModule が必要です。
以下のコード スニペットでアプリのルート モジュール ファイルを更新できます。
import { HammerModule } from "@angular/platform-browser";
@NgModule({
...
imports: [
...
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
にそれぞれ更新します。その他の列挙メンバー名は変更されません。
8.1.x から 8.2.x の場合:
IgxDrag
hideBaseOnDrag
とvisible
入力は非推奨のため、アプリケーションで同じ機能を実現するために、Angular が提供する基本要素を非表示にする任意の方法を使用できます。1 つの例として、可視性スタイルの非表示設定があります。これは、非表示にして DOM で使用するスペースを保持するためです。<div igxDrag [ngStyle]="{ 'visibility': targetDragged ? 'hidden' : 'visible' }" (dragStart)="onDragStarted($event)" (dragEnd)="onDragEnded($event)"> Drag me! </div>
public targetDragged = false; public onDragStarted(event) { this.targetDragged = true; } public onDragEnded(event) { this.targetDragged = false; }
animateOnRelease
とdropFinished()
も非推奨のため、dropFinished()
メソッドの使用はtransitionToOrigin()
に置き換える必要があります。それ以外の場合は、ドラッグした要素を元の位置に戻すタイミングに応じて、transitionToOrigin()
を呼び出す必要があります。ドラッグされた要素の DOM の位置が変更されると、元の場所もそれに基づいて変更されることに注意してください。
IgxDrop
IxgDrop
ディレクティブで提供されるデフォルトのドロップ戦略はデフォルトでは適用されなくなったため、同じ動作を継続するには、新しい入力dropStrategy
を提供されたIgxAppendDropStrategy
実装に設定する必要があります。<div igxDrop [dropStrategy]="appendStrategy"></div>
import { IgxAppendDropStrategy } from 'igniteui-angular'; // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package public appendStrategy = IgxAppendDropStrategy;
インターフェイス
IgxDropEnterEventArgs
とIgxDropLeaveEventArgs
を使用する場合は、IDragBaseEventArgs
に置き換える必要があります。また、
IgxDropEventArgs
インターフェイスの使用はすべて、用する場合は、IDropDroppedEventArgs
に置き換える必要があります。
IgxRowDragDirective
IRowDragStartEventArgs
およびIRowDragEndEventArgs
では、関連先をより明確にするために引数の名前が変更されています。owner
引数はdragDirective
に名前が変更されます。owner
引数は、owner コンポーネントへの参照を提供するようになりました。コードが以下のような場合:
バージョン 8.2.x から以下のように更新します。public dragStart(event) { const directive = event.owner; }
public dragStart(event) { const directive = event.dragDirective; const grid = event.owner; }
IgxCombo
igx-combo
が選択とデータバインディングを処理する方法が変更されました。
- コンボの [
valueKey
] 入力が定義されている場合、コントロールは選択を実行するときに、渡されたデータ項目の配列でその特定のプロパティを探します。 すべての選択イベントは、データ項目のvalueKey
プロパティの値で処理されます。valueKey
が指定されているすべてのコンボには、入力で指定されたオブジェクト プロパティの値のみで構成される選択/双方向バインディングが必要です。
<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']); } }
- コンボに
valueKey
が定義されていない場合、すべての選択イベントは equality (===) で処理されます。valueKey
が指定されていないすべてのコンボでは、データ項目への参照で選択/双方向バインディングを処理する必要があります。
<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]]); } }
8.0.x から 8.1.x の場合:
igx-paginator
コンポーネントはスタンドアロン コンポーネントとして導入され、Grid コンポーネントでも使用されます。paginationTemplate
を設定している場合は、CSS を変更してページネーションを正しく表示する必要がある場合があることに注意してください。これは、コンテンツをセンタリングするための CSS ルールを持つページング固有のコンテナーの下にテンプレートが適用されなくなったため、手動で追加する必要がある場合があるためです。 以下はスタイルの例です。
<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;
}
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
で置き換えられることに注意してください。
7.0.x から 7.1.x
アプリケーションで IgxGrid の集計を使用する場合、
IgxSummaryOperand.operate()
メソッドがからデータとともに順番に呼び出されて集計行に必要な高さを計算します。カスタム集計オペランドは、メソッドが常に適切な長さの IgxSummaryResult の配列を返します。バージョン 7.1 以前:
export class CustomSummary extends IgxNumberSummaryOperand {
public operate(data?: any[]): IgxSummaryResult[] {
return [{
key: 'average',
label: 'average',
summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
}];
}
}
バージョン 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
}];
}
}
6.0.x から 6.1.x
- アプリケーションで IgxCombo コントロールを使用する場合、
itemsMaxWidth
オプションを設定し、このオプションをitemsWidth
に変更してください。