업데이트 안내

    Ignite UI for Angular 버전 관리에서 첫 번째 숫자는 항상 코드가 지원하는 Angular의 주요 버전과 일치하고 두 번째 숫자는 주요 버전 릴리스에 전용됩니다. 주요 릴리스 사이에 중단 변경 사항이 도입될 수 있습니다. Ignite UI for Angular의 각 릴리스에 대한 포괄적인 변경 사항 목록은 제품 CHANGELOG에서 찾을 수 있습니다.

    The Ignite UI for Angular package also supports automatic version migration through ng update schematics. Those will attempt to migrate all possible breaking changes (renamed selectors, classes and @Input/Output properties), however there might be still changes that cannot be migrated. Those are usually related to typescript application logic and will be described additionally below.

    First run the ng update command which will analyze your application and available updates for its packages.

    ng update

    ​Ignite UI for Angular 업데이트하려면 다음 명령을 실행하세요.

    ng update @infragistics/igniteui-angular

    ​Ignite UI for Angular 업데이트하려면 다음 명령을 실행하세요.

    ng update igniteui-angular

    When you update @infragistics/igniteui-angular or igniteui-angular - it's recommended to update @angular/core, @angular/cli and igniteui-cli packages to their matching versions. To update the Ignite UI CLI package run the following command:

    ng update igniteui-cli

    ​Angular Core 패키지를 업데이트하려면 다음 명령을 실행하세요.

    ng update @angular/core

    ​Angular CLI 패키지를 업데이트하려면 다음 명령을 사용하세요.

    ng update @angular/cli
    Note

    If the ng update command fails because of package dependency mismatches, then revert the update, delete the node_modules folder and rerun the update with --force flag.

    Additional manual changes

    안타깝게도 모든 변경 사항이 자동으로 업데이트될 수는 없습니다. 아래 변경 사항은 버전에서 발생하는 섹션으로 분할되므로 업데이트가 필요한 경우 현재 버전에서 시작하여 아래에서 위로 추가 업데이트를 적용해야 합니다.

    예를 들어 버전 6.2.4에서 7.1.0으로 업데이트하는 경우 "6.x .." 섹션에서 시작하여 해당 변경 사항을 적용하고 작업을 진행합니다.

    From 20.x to 21.0.x

    Multiple Entry Points Support

    Version 21.0.0 introduces multiple entry points for better tree-shaking and code splitting. The main entry point (igniteui-angular) remains fully backwards compatible, but migrating to granular entry points is recommended for optimal bundle sizes.

    Key changes:

    • Components organized into dedicated entry points (e.g., igniteui-angular/grids/grid, igniteui-angular/button)
    • Some components relocated (input directives, autocomplete, radio group)
    • Type rename: Direction → CarouselAnimationDirection

    Migration:

    When updating, you'll be prompted to migrate imports automatically:

    ng update igniteui-angular

    Choose "Yes" when prompted, or migrate later with:

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

    For complete details on entry points, migration options, breaking changes, and usage examples, see the Code Splitting and Multiple Entry Points guide.

    Dependency Injection Refactor

    All internal dependency injection now uses the inject() API. This generally doesn't affect application code, but if you extend Ignite UI components or services, you may need to update your constructors to use inject() instead of constructor parameters.

    From 17.2.x to 18.0.x

    Breaking changes

    • In version 18.0.x the deprecated displayDensity property is removed in favor of the custom CSS property --ig-size. For further reference please see the update guide from 16.0.x to 16.1.x.

    일반적인

    • IgxPivotGrid

    Breaking changes

    • The property showPivotConfigurationUI of pivot grid is changed and extended to 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>

    From 17.0.x to 17.1.x

    일반적인

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • 주요 변경 내용
        • rowAdd and rowDelete events now emit event argument of type IRowDataCancelableEventArgs instead of IGridEditEventArgs. The two interfaces are still compatible, however redundant for these events properties cellID, newValue, oldValue, isAddRow are deprecated in IRowDataCancelableEventArgs and will be removed in a future version. Switching to the correct new interfaces should reveal any deprecated use that can be safely removed.
      • 사용 중단
        • rowID property has been deprecated in the following interfaces: IGridEditDoneEventArgs, IPathSegment, IRowToggleEventArgs, IPinRowEventArgs, IgxAddRowParent and will be removed in a future version. Use rowKey instead.
        • primaryKey property has been deprecated in the following interfaces: IRowDataEventArgs, IGridEditDoneEventArgs. Use rowKey instead.
        • data property has been deprecated in the following interfaces: IRowDataEventArgs. Use rowData instead.

    Breaking changes

    • In version 17.1.x the icon type of the igxButton directive has been changed to the igxIconButton directive of type flat. Automatic migrations are available and will be applied on ng update. However, some of the igxButton input properties that could previously be used with the icon type buttons, cannot be applied to the newly created igxIconButton. If you have used the igxButtonColor or the igxButtonBackground properties with a button of type icon, you should update it as follows:
    // 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>

    NOTE: Users have to manually add the IgxIconButtonDirective into their imports:

    import { IgxIconButtonDirective } from 'igniteui-angular';

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

    From 16.1.x to 17.0.x

    일반적인

    • In 17.0 Angular have removed the @nguniversal/* packages. If the project uses these packages a standard ng update call will cause an error in the igniteui-angular migrations due to improperly modified package-lock.json - more details can be found in issue #13668. To update to 17.0.x one of the following additional steps needs to be taken:
      • Delete the package-lock.json file before running ng update
      • Run npm dedupe --legacy-peer-deps before running ng update igniteui-angular

    획기적인 변화

    • 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';

        사용 예는 업데이트된 현지화(i18n) 문서에서 찾을 수 있습니다.

    From 16.0.x to 16.1.x

    일반적인

    Non-breaking changes

    • 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);
}

    From 15.1.x to 16.0.x

    • The upgrade to Angular 16 comes with changes in how NgModules operate under the hood. Previously, adding a module that internally depends on another would make the declarations of both available in your app. This behavior was not intended and Angular 16 changes it. If your app was depending on this behavior, e.g. you were only importing a module containing many internal dependencies like IgxGridModule and using components coming with those, you will need to manually add the modules for each component your app uses separately.

    • 주요 변경 사항

    • In 16.0.x, all grid properties, related to paging, are removed. Paging behavior is now configured and controlled entirely through the IgxPaginatorComponent. To enable paging in the grid, initialize the IgxPaginatorComponent in the grid and set related input properties and attach to event handlers to the paginator itself:

    <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);
}
    • In 16.0.x, grid method getCellByColumnVisibleIndex(rowIndex: number, index: number) is removed. Instead, use: getCellByKey(rowSelector: any, columnField: string) or getCellByColumn(rowIndex: number, columnField: string). Example:
     // 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);

    From 15.0.x to 15.1.x

    • 획기적인 변화
    • rowSelectionChanging arguments type is changed. Now the oldSelection, newSelection, added and removed collections, part of the IRowSelectionEventArgs interface, no longer consist of the row keys of the selected elements (when the grid has set a primaryKey), but now in any case the row data is emitted. When the grid is working with remote data and a primaryKey is set - for the selected rows that are not currently part of the grid view, a partial row data object will be emitted.

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

      // 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]
    });
  }

    • Behavioral Change When selected row is deleted from the grid component, rowSelectionChanging event is not emitted.

    • 시각적 변화

    • 15.1에서는 입력 구성 요소의 크기가 증가했습니다. 이는 Material 테마를 사용할 때 더욱 두드러집니다. Material 사양과 일치하도록 이 작업을 수행합니다. 애플리케이션이 변경으로 인해 부정적인 영향을 받는 경우, displayDensity 입력을 사용하여 보다 밀도가 높은 설정(예: 편안한 것에서 아늑한 것, 아늑한 것에서 컴팩트한 것)으로 설정할 수 있습니다.

      예

        <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에서는 선택 및 콤보 구성 요소가 이제 토글 아이콘 주위에 배경을 갖습니다. 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;
}

    From 14.2.x to 15.0.x

    일반적인

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • 이제 그리드 템플릿의 매개변수에는 해당 컨텍스트에 대한 유형이 있습니다. 앱이 엄격한 템플릿 모드에 있고 잘못된 유형을 사용하는 경우에도 문제가 발생할 수 있습니다. 변환이 필요할 수 있는 템플릿에 대한 참조:
        • 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:

      14.2.x에서:

      :root {
    --igx-typography: 'Titillium Web', sans-serif; 
}

      15.0.x에서는 다음과 같습니다.

      :root {
    --ig-typography: 'Titillium Web', sans-serif; 
}

    Themes

    • Breaking Change - The grays input argument has been renamed to gray.
      Here's how that will affect existing code:

      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 변수 생성이​ ​pale-vars​ ​mixin 대신 팔레트 mixin에 의해 수행됩니다.

    • 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.

      예

      $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);

    • 주요 변경 사항-팔레트 매개변수가 이제 모든 구성 요소 테마에서 제거되었습니다.​ ​팔레트 믹스인을 사용하여 사용자 정의 구성 요소 구성 요소 테마에 대한 사용자 정의 팔레트의 범위를 지정할 수 있습니다. 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);
    }
}

    타이포그래피

    • 주요 변경 사항-유형 스타일 믹스인은 이제 유형 스케일을 매개변수로 허용하지 않고 카테고리 이름만 허용합니다.

      14.2.x 이하:

      .my-class {
    @include type-style($type-scale: $my-type-scale, $category: h1);
}

      15.0.x 이상:

      .my-class {
    @include type-style(h1);
}

    표고

    • 주요 변경 사항-고도 함수에는 이제 $name( 고도 이름) 이라는 하나의 명명된 인수만 있습니다.

    • Breaking Change - The elevations function has been removed, you can now configure the elevation colors, using the configure-elevations mixin.

      14.2.x 이하:

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

      15.0.x 이상:

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

    Grid Toolbar

    • Breaking Change - The IgxGridToolbarTitleDirective and IgxGridToolbarActionsDirective have been converted to components, keeping only the element selector. For apps using the preferred element markup of <igx-grid-toolbar-title> and <igx-grid-toolbar-actions> there should be no functional change. Apps using the igxGridToolbarTitle and igxGridToolbarActions directives on other elements will need to convert those to the mentioned elements instead:

      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>

    From 13.1.x to 13.2.x

    Themes

    • 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.

    From 13.0.x to 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;
}

    From 12.2.x to 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>

        이러한 템플릿을 수동으로 업데이트하여

        <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

      • 내보내기 서비스는 이제 루트 수준에 주입되므로 더 이상 애플리케이션에 제공할 필요가 없습니다.

    • 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

      • 주요 변경 사항- 다음 입력이 제거되었습니다.
        • 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

    테마

    • Icon component color property has been deprecated. Use style.color CSS property to change its default color. Examples:
    <igx-icon [style.color]="'#e41c77'">home</igx-icon>

    <igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>
    • Sass Modules: The theming engine has switched to Sass modules. This change means all theming library functions (component themes, etc.), mixins (component mixins, etc.), and variables are now being forwarded from a single file. To correctly use the Sass theming library, your project should utilize Dart Sass version 1.33.0 or later and change all imports of the theming library from:
    // free version
@import '~igniteui-angular/lib/core/styles/themes/index';

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

    to:

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

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

    전체 테마 라이브러리를 한 번만 가져온 다음 앱의 다른 Sass 파일에서 사용하려면 반드시 전달하세요. 가져온 Sass 파일은 자동으로 전달되지 않습니다.

    Before:

    // _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';

    After:

    // _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 palette variables do not refer to HEX values anymore, instead they represent a list of 3 values H, S, and L, which means they should be passed to either the hsl or hsla CSS functions.

    Before:

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

    After:

    .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);

    마찬가지로, 밝은 테마에는 더 어두운 회색 음영과 밝은 색상 스키마가 필요합니다.

    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);
    • 제외된 구성 요소 테마:

    전역 테마에서 일부 구성 요소 테마를 제외하고 사용자 정의 대체 테마를 만든 경우 구성 요소 믹스인이 포함되어 있고 올바른 구성 요소 테마가 전달되었는지 확인해야 합니다.

    $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;

    From 12.0.x to 12.1.x

    Grids

    • 주요 변경 사항:

      • IgxPaginatorComponent - 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.

      • IgxPageSizeSelectorComponent and IgxPageNavigationComponent 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>

      • 리팩터링 중에 페이징 구성 요소에 대한 API가 변경되었으며 이제 많은 이전 속성이 더 이상 사용되지 않습니다. 불행하게도 이러한 변경 사항 중 일부를 적절하게 마이그레이션하는 것은 아무리 말해도 복잡하므로 모든 오류는 애플리케이션 수준에서 처리해야 합니다.

      • 다음 속성은 그리드에서 더 이상 사용되지 않습니다.

        • 페이징, perPage 페이지, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone

      • 다음 메소드도 더 이상 사용되지 않습니다.

        • 다음페이지()
        • 이전페이지()

      • 다음 속성이 제거되었습니다.

        • 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.

    • 그리드 지원 중단:

      • 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.

    IgxGridCell migration

    • IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent는 더 이상 공개 API에 노출되지 않습니다.

    • Public APIs, which used to return an instance of one of the above, now return an instance of 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[]
    • cell property in the IGridCellEventArgs event arguments emitted by cellClick, selected, contextMenu and doubleClick events is now an instance of IgxGridCell
    • let-cell property in cell template is now IgxGridCell.
    • getCellByColumnVisibleIndex is now deprecated and will be removed in next major version. Use getCellByKey, getCellByColumn instead.

    참고:

    • ng update will migrate the uses of IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent, 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 IgxGridCell.
    • 해당 인덱스의 행이 데이터 행이 아니고 IgxGroupByRow, IgxSummaryRow, 세부 정보 행 등인 경우 getCellByIndex 및 기타 메소드는 정의되지 않음을 반환합니다.

    Themes

    Due to complaints pertaining to compilation warnings (see #9793) we now use the math.div function; This functionality is supported by Dart Sass from version 1.33.0 onward.

    해결책

    If for any reason you see Sass compilation errors saying math.div is not a known function it means you are using an outdated version of Sass in your project.

    1. 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

    2. 어떤 이유로 위의 방법을 사용하여 최신 버전의 Angular로 업그레이드할 수 없는 경우 Sass 파일에서 글로벌 플래그를 설정하여 이전 Sass 분할 방법으로 돌아갈 수 있습니다.

      $__legacy-libsass: true;

    From 11.1.x to 12.0.x

    Themes

    • 주요 변경 사항:

      • 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.

        다음과 같은 방법으로 기존 유형별 아바타 테마를 수정해야 합니다.

        예를 들면 다음과 같습니다.

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

@include avatar($avatar-theme);

        다음과 같이 변환해야 합니다.

        $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.

        아래 코드 조각과 동일한 결과를 얻으려면.

        <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();
        Important

        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:

        주제 글꼴군 유형 척도
        재료 $material-서체 $material-type-scale
        유창한 $fluent-서체 $fluent-유형-규모
        부트스트랩 $bootstrap-서체 $bootstrap-유형-규모
        남빛 $indigo-서체 $indigo-type-scale

    IgxBottomNav component

    탭 헤더와 콘텐츠를 정의하는 보다 유연하고 설명적인 방법을 제공하기 위해 IgxBottomNavComponent가 완전히 리팩터링되었습니다. 기존 igx-bottom-nav 정의를 새 정의로 마이그레이션하려면 ng update를 통해 업데이트하는 것이 좋습니다.

    • 주형

      • The new structure defines bottom navigation item components each wrapping a header and a content component. The headers usually contain an icon (Material guidelines) but may as well have a label or any other custom content.

      • For header styling purposes we introduced two new directives - igxBottomNavHeaderLabel and igxBottomNavHeaderIcon.

      • Since the header component now allows adding any content, the igxTab directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary.

      • When the component is used in navigation scenario, the routerLink directive needs to be attached to the header component.

        <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 변경

      • The id, itemStyle, panels, viewTabs, contentTabs and tabs properties were removed. Currently, the items property returns the collection of tabs.
      • 다음 속성이 변경되었습니다.
        • The tab item's isSelected property was renamed to selected.
        • The selectedTab property was renamed to selectedItem.
      • The onTabSelected and onTabDeselected events were removed. We introduced three new events, selectedIndexChanging,selectedIndexChange and selectedItemChange, which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level.

    IgxTabs component

    탭 헤더와 콘텐츠를 정의하는 보다 유연하고 설명적인 방법을 제공하기 위해 IgxTabsComponent가 완전히 리팩터링되었습니다. 기존 igx-tabs 정의를 새 정의로 마이그레이션하려면 ng update를 통해 업데이트하는 것이 좋습니다.

    • 주형

      • 새로운 구조는 각각 헤더와 콘텐츠 구성 요소를 래핑하는 탭 항목 구성 요소를 정의합니다. 헤더에는 일반적으로 아이콘과 라벨이 포함되어 있지만 다른 사용자 정의 콘텐츠도 포함될 수 있습니다.

      • For header styling purposes we introduced two new directives - igxTabHeaderLabel and igxTabHeaderIcon.

      • Since the header component now allows adding any content, the igxTab directive, which was previously used to retemplate the tab's header, was removed because it is no longer necessary.

      • When the component is used in navigation scenario, the routerLink directive needs to be attached to the header component.

        <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 변경

      • The id, groups, viewTabs, contentTabs and tabs properties were removed. Currently, the items property returns the collection of tabs.
      • 다음 속성이 변경되었습니다.
        • The tab item's isSelected property was renamed to selected.
        • The selectedTabItem property was shortened to selectedItem.
        • The type property, with its contentFit and fixed options, is no longer available. The header sizing & positioning mode is currently controlled by the tabAlignment input property which accepts four different values - start (default), center, end and justify. The old contentFit type corresponds to the current start alignment value and the old fixed type - to the current justify value.
      • The tabItemSelected and tabItemDeselected events were removed. We introduced three new events, selectedIndexChanging, selectedIndexChange and selectedItemChange, which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level.

    IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

    • IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent는 더 이상 공개 API에 노출되지 않습니다.
    • Public APIs, which used to return an instance of one of the above, now return objects implementing the public RowType interface:
    const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;

    While the public API of RowType is the same as what IgxRowComponent and others used to expose, please note:

    • toggle method, exposed by the IgxHierarchicalRowComponent is not available. Use expanded property for all row types:
    grid.getRowByIndex(0).expanded = false;

    *row.rowData_ and row.rowID are deprecated and will be entirely removed with version 13. Please use row.data and row.key instead.

    • 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.

    IgxInputGroupComponent

    • The disabled property has been removed. The property was misleading, as the state of the input group was always managed by the underlying igxInput.

      • Running ng update will handle all instances in which [disabled] was used as an @Input in templates.

      • If you are referencing the property in a .ts file:

        export class CustomComponent {
    public inputGroup: IgxInputGroupComponent
    ...
    this.inputGroup.disabled = false;
}

        you should please manually update your code to reference the underlying input directive's disabled property:

        export class CustomComponent {
    public input: IgxInputDirective
    ...
    this.input.disabled = false;
}

    IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

    • The value property for IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now accepts ISO 8601 string format. This means that value type could be Date or string.
    • The inputFormat property of IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent now doesn't accept y for the year part. You should update it to yy.

    From 10.2.x to 11.0.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • The way the toolbar is instantiated in the grid has changed. It is now a separate component projected in the grid tree. Thus the showToolbar property is removed from all grids and all other properties related to the toolbar in the grid are deprecated. It is recommended to follow the recommended way for enabling toolbar features as described in the Toolbar topic.
      • The igxToolbarCustomContent directive is removed. While the migration will move your template content inside the toolbar content, it does not try to resolve template bindings. Make sure to check your template files after the migration.
      • 툴바 구성 요소에 대한 API는 리팩터링 중에 변경되었으며 이제 많은 이전 속성이 제거되었습니다. 불행하게도 이러한 변경 사항에 대해 적절한 마이그레이션을 수행하는 것은 아무리 말해도 복잡하므로 모든 오류는 프로젝트 수준에서 처리해야 합니다.

    From 10.0.x to 10.1.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • Since we have removed the IgxExcelStyleSortingTemplateDirective, IgxExcelStyleHidingTemplateDirective, IgxExcelStyleMovingTemplateDirective, IgxExcelStylePinningTemplateDirective, and IgxExcelStyleSelectingTemplateDirective directives used for templating some parts of the Excel style filter menu, you could use the newly added directives for templating the column and filter operations areas - IgxExcelStyleColumnOperationsTemplateDirective and IgxExcelStyleFilterOperationsTemplateDirective. We have also exposed all internal components of the Excel style filter menu so that they can be used inside custom templates. You can find more information about the new template directives in the Excel-Style Filtering Topic.
    • IgxGrid

      • The selectedRows() method has been refactored into an input property named. This breaking change allows users to easily change the grid's selection state at runtime. Pre-selection of rows is also supported. All instances where the selectedRows() method is called have to be rewritten without any parentheses.

      • Binding to the selectedRows input property could look something like this:

        public mySelectedRows = [0, 1, 2];

        <igx-grid [data]="myData" rowSelection="multiple"
    primaryKey="ID" [selectedRows]="mySelectedRows">
    <!-- ... -->
</igx-grid>

    From 9.0.x to 10.0.x

    • Igx드롭다운

      • The display property of the dropdown item has been changed from flex to block. We have done this in order to have truncated text enabled by default. Due to that change, if there is more than text in the content of the dropdown item, the layout needs to be handled on the application level.

      • 다음 예제에서는 아이콘과 텍스트 콘텐츠로 드롭다운 항목의 스타일을 지정하여 수직으로 정렬하는 방법을 보여줍니다.

        <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;
    }
}

    From 8.x.x to 9.0.x

    Due to a breaking change in Angular 9 Hammer providers are no longer implicitly added please, refer to the following document for details: Because of this the following components require HammerModule to be imported in the root module of the application in order for touch interactions to work as expected:

    • igxGrid
    • igx계층형 그리드
    • igxTreeGrid
    • igx목록
    • igxNavigationDrawer
    • igxTimePicker
    • igxDatePicker
    • igxMonthPicker
    • igx슬라이더 *
    • igx캘린더
    • igxCarousel

    * 참고- igxSlider에는 모든 사용자 상호 작용에 HammerModule이 필요합니다.

    다음 코드 조각을 사용하여 앱의 루트 모듈 파일을 업데이트할 수 있습니다.

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

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

    Due to name changes made in some of the Enumerations we export, manual update is needed for their members. Here's a list of all changes made that require manual update:

    • 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.

    From 8.1.x to 8.2.x

    • IgxDrag

      • Since hideBaseOnDrag and visible inputs are being deprecated, in order to achieve the same functionality in your application, you can use any way of hiding the base element that Angular provides. One example is setting the visibility style to hidden, since it will only make in invisible and keep its space that it takes in the 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;
}

      • Since animateOnRelease and dropFinished() are also being deprecated, any dropFinished() method usage should be replaced with transitionToOrigin(). Otherwise you would need to call transitionToOrigin() depending on when you would want the dragged element to transition back to its original location. Note that if the dragged element DOM position is changed, then its original location will also change based on that.

    • 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.

    • IgxRowDrag 지시어

      • 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;
}

        버전 8.2.x에서는 다음과 같이 업데이트되어야 합니다.

        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]]);
    }
}

        추가 정보 및 공식 문서에서 콤보 설정에 대한 자세한 내용을 읽을 수 있습니다.

    From 8.0.x to 8.1.x

    • The igx-paginator component is introduced as a standalone component and is also used in the Grid components. Keep in mind that if you have set the paginationTemplate, you may have to modify your CSS to display the pagination correctly. This is due to the fact that the template is no longer applied under a paging-specific container with CSS rules to center content, so you might need to add them manually. The style should be something similar to:
    <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;
}

    From 7.3.x to 8.0.x

    • While updating, if you face the following error Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5")., you should update @angular/core package first. This is related to this known Angular CLI issue
    • While updating the igniteui-angular package, if you see the following error Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208"), you should update using ng update igniteui-angular --force. This could happen if you update @angular/core and @angular/cli before updating igniteui-angular.

    From 7.2.x or 7.3.x to 7.3.4

    • If you use the filterGlobal method of IgxGrid, IgxTreeGrid or IgxHierarchicalGrid, you should know that the condition parameter is no longer optional. When the filterGlobal method is called with an invalid condition, it will not clear the existing filters for all columns.

    From 7.1.x to 7.2.x

    • If you use an IgxCombo with combo.value, you should know that now combo.value is only a getter.
    • If you use IgxTextHighlightDirective, you should know that the page input property is deprecated. rowIndex, columnIndex and page properties of the IActiveHighlightInfo interface are also deprecated. Instead, row and column optional properties are added.
    • If you use the button-theme, you should know that the $button-roundness has been replaced for each button type with: $flat-border-radius, $raised-border-radius, $outline-border-radius, $fab-border-radius, $icon-border-radius.

    From 7.0.x to 7.1.x

    • If you use an IgxGrid with summaries in your application, you should know that now the IgxSummaryOperand.operate() method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult with proper length.

    버전 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
  }];
 }
}

    From 6.0.x to 6.1.x

    • If you use an IgxCombo control in your application and you have set the itemsMaxWidth option, you should change this option to itemsWidth