Guia de atualização

No Ignite UI for Angular controle de versão, o primeiro número sempre corresponde à versão principal do Angular o código dá suporte e o segundo é dedicado para versões principais. Alterações significativas podem ser introduzidas entre as versões principais. Uma lista abrangente de alterações para cada versão do Ignite UI for Angular pode ser encontrada no produto 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

Para atualizar o pacote licenciado Ignite UI for Angular, execute o seguinte comando:

ng update @infragistics/igniteui-angular

Para atualizar o pacote Ignite UI for Angular free, execute o seguinte comando:

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

Para atualizar o pacote principal do Angular, execute o seguinte comando:

ng update @angular/core

Para atualizar o pacote da CLI do Angular, use o seguinte comando:

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

Infelizmente, nem todas as alterações podem ser atualizadas automaticamente. As alterações abaixo são divididas em seções à medida que ocorrem nas versões, portanto, se alguma atualização for necessária, você deve começar a partir da versão atual e aplicar outras atualizações de baixo para cima.

Por exemplo: se você estiver atualizando da versão 6.2.4 para a 7.1.0, comece com a opção "De 6.x .. " aplique essas alterações e vá subindo:

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.

Geral

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

Geral

IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
- Alterações significativas
  - 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.
- Substituições
  - 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

Geral

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

Alteração significativa

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';
  
  Exemplos de uso podem ser encontrados no documento Localização (i18n) atualizado.

From 16.0.x to 16.1.x

Geral

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.
Alterações significativas
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

Alteração significativa
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.
Mudança visual
Na versão 15.1, os tamanhos dos componentes de entrada aumentaram. Isso é mais perceptível ao usar o tema Material. Fazemos isso para corresponder às especificações do material. Se o aplicativo for afetado negativamente pela alteração, você poderá usar a entrada displayDensity e defini-la para uma configuração mais densa, por exemplo, de confortável para aconchegante ou de aconchegante para compacto.

Exemplo

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

Na versão 15.1, o componente de seleção e combinação agora tem plano de fundo ao redor do ícone de alternância. Você pode alterar o plano de fundo e a cor do ícone usando scss ou css.

Exemplo

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

Exemplo

.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

Geral

igxGrid, igxHierarchicalGrid, igxTreeGrid
- Os parâmetros em modelos de grade agora têm tipos para seu contexto. Isso também pode causar problemas se o aplicativo estiver no modo de modelo estrito e usar o tipo errado. Referências ao modelo que podem exigir conversão:
  - 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:

Na versão 14.2.x:
```
:root {
    --igx-typography: 'Titillium Web', sans-serif; 
}
```
Na versão 15.0.x, isso se torna:
```
: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:

Na versão 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));
}

Na versão 15.0.x e a partir de então:

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

Quebrando variáveis CSS geradoras de alterações para uma paleta agora é feito pelo mixin de paleta, em vez do mixin palette-vars.
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.

Exemplo
```
$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);
```
Alteração interruptiva-O parâmetro da paleta agora é removido de todos os temas de componentes. Você pode usar a combinação de paleta para definir o escopo de uma paleta personalizada para um tema de componente de componente personalizado. Como abandonamos o suporte para o IE11, todos os temas de componentes se referem às variáveis CSS globais para cores, elevações, tipografia, etc., portanto, não é mais necessário passar uma paleta personalizada para um tema de componente.

Gerando um tema personalizado com uma paleta personalizada:
```
// 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);
    }
}
```

Tipografia

Alteração interruptiva- O mixin de estilo de tipo agora não aceita escala de tipo como parâmetro, apenas o nome da categoria.

Na versão 14.2.x e anteriores:
```
.my-class {
    @include type-style($type-scale: $my-type-scale, $category: h1);
}
```
Na versão 15.0.x e posteriores:
```
.my-class {
    @include type-style(h1);
}
```

Elevações

Alteração interruptiva- A função de elevação agora tem apenas um argumento nomeado -$name (o nome da elevação).
Breaking Change - The elevations function has been removed, you can now configure the elevation colors, using the configure-elevations mixin.

Na versão 14.2.x e anteriores:
```
.my-class {
    box-shadow: elevation($elevations, $elevation: 8);
}
```
Na versão 15.0.x e posteriores:
```
.my-class {
    box-shadow: elevation(8);
}
```

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

Geral

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

Geral

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>
```
  Atualize esses modelos manualmente para
```
<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
- Os serviços de exportador não precisam mais ser fornecidos no aplicativo, pois agora são injetados em um nível raiz.
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
- Alteração interruptiva- A seguinte entrada foi removida
  - 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

Temas

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

Se você quiser importar toda a biblioteca de temas apenas uma vez e usá-la em outros arquivos Sass em seu aplicativo, certifique-se de encaminhá-la. Os arquivos Sass importados não serão encaminhados automaticamente.

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

Paletas e esquemas:
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
}

Isso foi feito para que as paletas possam ser alteradas em tempo de execução usando apenas variáveis CSS. Dessa forma, o canal alfa para uma determinada cor de paleta pode ser modificado em tempo de execução sem afetar a cor subjacente da paleta.

Certifique-se de que a paleta e o esquema de componentes corretos sejam passados para seu componente personalizado e temas globais. Se você deseja criar um tema escuro global, certifique-se de selecionar um tom de cor mais claro para sua cor cinza, por exemplo:

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

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

Da mesma forma, os temas claros exigem um tom mais escuro de cinza e um esquema de cores claras.

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

Temas de componentes excluídos:

Caso você tenha excluído alguns temas de componentes do tema global e tenha criado temas de substituição personalizados, certifique-se de que a combinação de componentes seja incluída e receba o tema de componente correto:

$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

Alterações significativas:
- 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>
```
- A API do componente de paginação foi alterada durante a refatoração e muitas das propriedades antigas agora estão obsoletas. Infelizmente, ter uma migração adequada para algumas dessas alterações é complicado, para dizer o mínimo, portanto, quaisquer erros devem ser tratados no nível do aplicativo.
- As seguintes propriedades foram preteridas da Grade:
  - paginação, página por página, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone
- Os seguintes métodos também estão obsoletos:
  - nextPage()
  - anteriorPágina()
- A seguinte propriedade foi removida:
  - 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.
Descontinuação da grade:
- 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 não são mais expostos na API pública.
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.

Observação:

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.
getCellByIndex e outros métodos retornarão undefined, se a linha nesse índice não for uma linha de dados, mas for IgxGroupByRow, IgxSummaryRow, linha de detalhes, etc.

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.

Solução

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.

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
```
Se, por algum motivo, você não puder atualizar para a versão mais recente do Angular usando o método acima, poderá voltar ao antigo método de divisão Sass definindo um sinalizador global em seu arquivo Sass:
```
$__legacy-libsass: true;
```

From 11.1.x to 12.0.x

Themes

Alterações significativas:

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.

Você precisará modificar os temas de avatar específicos do tipo existente da seguinte maneira:

Por exemplo, isso:
```
$avatar-theme: avatar-theme(
    $initials-background: blue,
    $initials-color: orange,
    $icon-background: blue,
    $icon-color: orange,
);

@include avatar($avatar-theme);
```
Precisa ser transformado nisso:
```
$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.

Para obter o mesmo resultado do trecho de código abaixo.
```
<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:

Tema	Família de fontes	Escala de tipo
Material	Tipo de $material	Escala de tipo $material
Fluente	$fluent tipo de letra	$fluent escala de tipo
Bootstrap	Tipo de $bootstrap	Escala de tipo $bootstrap
Anil	$indigo tipo de letra	Escala de tipo $indigo

IgxBottomNav component

O IgxBottomNavComponent foi completamente refatorado para fornecer uma maneira mais flexível e descritiva de definir cabeçalhos e conteúdo de guias. É recomendável que você atualize via ng update para migrar as definições igx-bottom-nav existentes para as novas.

Modelo
- 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>
```
Mudanças na API
- The id, itemStyle, panels, viewTabs, contentTabs and tabs properties were removed. Currently, the items property returns the collection of tabs.
- As seguintes propriedades foram alteradas:
  - 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

O IgxTabsComponent foi completamente refatorado para fornecer uma maneira mais flexível e descritiva de definir cabeçalhos e conteúdo de guias. É recomendado que você atualize via ng update para migrar as definições igx-tabs existentes para as novas.

Modelo
- A nova estrutura define componentes de item de guia, cada um envolvendo um cabeçalho e um componente de conteúdo. Os cabeçalhos geralmente contêm um ícone e um rótulo, mas também podem ter qualquer outro conteúdo personalizado.
- 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>
```
Mudanças na API
- The id, groups, viewTabs, contentTabs and tabs properties were removed. Currently, the items property returns the collection of tabs.
- As seguintes propriedades foram alteradas:
  - 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 não são mais expostos na API pública.
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.
- A API do componente da barra de ferramentas foi alterada durante a refatoração e muitas das propriedades antigas foram removidas. Infelizmente, ter uma migração adequada para essas mudanças é complicado, para dizer o mínimo, portanto, quaisquer erros devem ser tratados no nível do projeto.

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

IgxDropdown
- 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.
- O exemplo a seguir demonstra como estilizar um item suspenso com um ícone e conteúdo de texto para que eles sejam alinhados verticalmente.
```
<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
igxHierarchicalGrid
igxTreeGrid
igxList
igxNavigationDrawer
igxTimePicker
igxDatePicker
igxMonthPicker
igxSlider *
igxCalendário
igxCarrossel

* Nota- igxSlider requer o HammerModule para todas as interações do usuário.

Você pode usar o snippet de código a seguir para atualizar o arquivo do módulo raiz do aplicativo.

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.
Diretiva IgxRowDragDirective
- IRowDragStartEventArgs and IRowDragEndEventArgs have argument's name changed in order to be more clear to what it relates to. owner argument is renamed to dragDirective. The owner argument now provides a reference to the owner component. If your code was like:
```
public dragStart(event) {
    const directive = event.owner;
}
```
  A partir da versão 8.2.x, ele deve ser atualizado para:
```
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]]);
    }
}
```
  Você pode ler mais sobre como configurar o combo no leia-me e na documentação oficial.

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.

Antes da versão 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

Guia de atualização

Note

Additional manual changes

From 17.2.x to 18.0.x

Breaking changes

Geral

Breaking changes

From 17.0.x to 17.1.x

Geral

Breaking changes

From 16.1.x to 17.0.x

Geral

From 16.0.x to 16.1.x

Geral

Non-breaking changes

From 15.1.x to 16.0.x

From 15.0.x to 15.1.x

From 14.2.x to 15.0.x

Geral

Themes

Exemplo

Tipografia

Elevações

Grid Toolbar

From 13.1.x to 13.2.x

Themes

From 13.0.x to 13.1.x

Geral

From 12.2.x to 13.0.x

Geral

Temas

From 12.0.x to 12.1.x

Grids

IgxGridCell migration

Themes

Solução

From 11.1.x to 12.0.x

Themes

Important

IgxBottomNav component

IgxTabs component

IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

IgxInputGroupComponent

IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

From 10.2.x to 11.0.x

From 10.0.x to 10.1.x

From 9.0.x to 10.0.x

From 8.x.x to 9.0.x

From 8.1.x to 8.2.x

From 8.0.x to 8.1.x

From 7.3.x to 8.0.x

From 7.2.x or 7.3.x to 7.3.4

From 7.1.x to 7.2.x

From 7.0.x to 7.1.x

From 6.0.x to 6.1.x

Temas