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

    O pacote Ignite UI for Angular também suporta migração automática de versões por meiong update de esquemas. Essas tentarão migrar todas as possíveis mudanças de quebra (seletores renomeados, classes e propriedades @Input/Output), porém ainda podem haver mudanças que não podem ser migradas. Esses geralmente estão relacionados à lógica de aplicação typescript e serão descritos adicionalmente abaixo.

    Primeiro, execute ong update comando que analisará sua aplicação e as atualizações disponíveis para seus pacotes.

    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

    Quando você atualiza@infragistics/igniteui-angular ouigniteui-angular- é recomendado atualizar@angular/core,@angular/cli eigniteui-cli os pacotes para as versões correspondentes. Para atualizar o pacote CLI Ignite UI, execute o seguinte comando:

    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

    Se ong update comando falhar por causa de incompatibilidades de dependência de pacotes, então reverta a atualização, exclua anode_modules pasta e execute novamente a atualização com--force a 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 20.x to 21.0.x

    Multiple Entry Points Support

    A versão 21.0.0 introduz múltiplos pontos de entrada para melhor balanceamento de árvores e divisão de código. O ponto de entrada principal (igniteui-angular) permanece totalmente compatível com versões anteriores, mas a migração para pontos de entrada granulares é recomendada para tamanhos ideais de fibrado.

    Principais mudanças:

    • Componentes organizados em pontos de entrada dedicados (por exemplo,igniteui-angular/grids/grid,igniteui-angular/button)
    • Alguns componentes realocados (diretivas de entrada, autocompletamento, grupo de rádio)
    • Renomeação do tipo:Direction →CarouselAnimationDirection

    Migration:

    Ao atualizar, você será solicitado a migrar as importações automaticamente:

    ng update igniteui-angular

    Escolha "Sim" quando solicitado, ou migre depois com:

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

    Para detalhes completos sobre pontos de entrada, opções de migração, alterações de quebra e exemplos de uso, consulte o guia de Divisão de Código e Múltiplos Pontos de Entrada.

    Dependency Injection Refactor

    Toda injeção interna de dependências agora usa ainject() API. Isso geralmente não afeta o código da aplicação, mas se você estender Ignite UI componentes ou serviços, pode ser necessário atualizar seus construtores para usarinject() em vez de parâmetros de construtor.

    From 17.2.x to 18.0.x

    Breaking changes

    Geral

    • IgxPivotGrid

    Breaking changes

    • A propriedadeshowPivotConfigurationUI da grade de pivô é alterada e estendida parapivotUI.
    // 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
        • rowAdderowDelete os eventos agora emitem argumento de evento do tipoIRowDataCancelableEventArgs em vez deIGridEditEventArgs. As duas interfaces ainda são compatíveis, porém redundantes para esses eventos,cellID​newValue​oldValue propriedadesisAddRow estão obsoletas eIRowDataCancelableEventArgs serão removidas em uma versão futura. Mudar para as novas interfaces corretas deve revelar qualquer uso obsoleto que possa ser removido com segurança.
      • Substituições
        • rowIDa propriedade foi descontinuada nas seguintes interfaces:IGridEditDoneEventArgs,IPathSegment,IRowToggleEventArgs,IPinRowEventArgs,,eIgxAddRowParent será removida em uma versão futura. UserowKey em vez disso.
        • primaryKeyfoi descontinuada nas seguintes interfaces:IRowDataEventArgs,IGridEditDoneEventArgs. UserowKey em vez disso.
        • dataPropriedade foi descontinuada nas seguintes interfaces:IRowDataEventArgs. UserowData em vez disso.

    Breaking changes

    • Na versão 17.1.x, oicon tipo daigxButton diretiva foi alterado para aigxIconButton diretiva do tipoflat. Migrações automáticas estão disponíveis e serão aplicadas.ng update No entanto, algumas dasigxButton propriedades de entrada que antes poderiam ser usadas com osicon botões de tipo não podem ser aplicadas ao recém-criadoigxIconButton. Se você usou asigxButtonColor propriedades ouigxButtonBackground com um botão do tipoicon, deve atualizá-las da seguinte forma:
    // 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>

    NOTA: Os usuários precisam adicionar manualmente issoIgxIconButtonDirective às suas importações:

    import { IgxIconButtonDirective } from 'igniteui-angular';

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

    From 16.1.x to 17.0.x

    Geral

    • Na versão 17.0 Angular removeram os@nguniversal/* pacotes. Se o projeto usar esses pacotes, uma chamada padrãong update causará um erro nasigniteui-angular migrações devido a modificações inadequadaspackage-lock.json– mais detalhes podem ser encontrados na edição #13668. Para atualizar para17.0.x um dos seguintes passos adicionais, é necessário adotar:
      • Apague opackage-lock.json arquivo antes de executarng update
      • Corrernpm dedupe --legacy-peer-deps antes de correrng update igniteui-angular

    Alteração significativa

    • O tipoIgxCombo de argumentos de evento deselectionChanging InIComboSelectionChangingEventArgs apresenta estas alterações:
      • propriedadesnewSelection eoldSelection foram renomeadas paranewValue eoldValue respectivamente para refletir melhor sua função. Assim como osvalue Combo, esses emitirão os valores especificados ou itens completos de dados, dependendo sevalueKey estão configurados ou não. Migrações automáticas estão disponíveis e serão aplicadas emng update isso.
      • duas novas propriedadesnewSelection eoldSelection são expostas no lugar das antigas, que não são mais afetadas evalueKey emitem itens consistentemente de Combodata.
      • propriedadesadded eremoved agora sempre contêm itens de dados, independentemente devalueKey estarem definidos. Isso os alinha com as propriedades atualizadasnewSelection eoldSelection de AND.

    Se seu código noselectionChanging handler de eventos dependia de lervalueKeys o argumento do evento, atualize-o da seguinte forma:

      // 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]
    });
  }
    • getCurrentResourceStringsfoi removido. Use as importações específicas de string de componentes.

      • Por exemplo, as cordas EN vêm deigniteui-angular:import { GridResourceStringsEN } from 'igniteui-angular';

      • Por exemplo, cadeias de DE ou outras linguagens vêm deigniteui-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

    • Estamos nos afastando doDisplayDensityToken token de injeção como uma forma de definir o tamanho dos componentes em favor de uma forma mais simples e robusta – usando propriedades personalizadas CSS. Por esse motivo, oDisplayDensityToken token de injeção agora está obsoleto. Isso se espalha por todos os componentes que expõem a propriedade dedisplayDensity entrada. As propriedades do token e da entrada serão removidas na versão 17.0.0. Incentivamos você a fazer o seguinte:

    Remova todas as declarações onde oDisplayDensityToken for fornecido:

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

    Remova todas as ligações ou atribuições programáticas àdisplayDensity propriedade de entrada:

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

    Em vez disso, use a propriedade--ig-size CSS personalizada para obter o mesmo resultado que comdisplayDensity:

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

    • A atualização para Angular 16 traz mudanças na formaNgModules como operam sob o capô. Antes, adicionar um módulo que dependia internamente de outro tornava as declarações de ambos disponíveis no seu app. Esse comportamento não foi intencional e Angular 16 muda isso. Se seu app dependesse desse comportamento, por exemplo, se você só importasse um módulo contendo muitas dependências internas eIgxGridModule usasse componentes que vêm com elas, você precisará adicionar manualmente os módulos para cada componente que seu app usa separadamente.

    • Alterações significativas

    • Na versão 16.0.x, todas as propriedades da grade relacionadas à paginação são removidas. O comportamento de paginação agora está configurado e controlado inteiramente através doIgxPaginatorComponent. Para habilitar a paginação na grade, inicialize oIgxPaginatorComponent na grade, defina as propriedades de entrada relacionadas e anexe aos manipuladores de eventos ao próprio paginador:

    <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);
}
    • Na versão 16.0.x, o métodogetCellByColumnVisibleIndex(rowIndex: number, index: number) de grade é removido. Em vez disso, use:getCellByKey(rowSelector: any, columnField: string) ougetCellByColumn(rowIndex: number, columnField: string). Exemplo:
     // 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
    • rowSelectionChangingO tipo de argumentos é alterado. Agora asoldSelection coleções enewSelection​added​removed e que fazem parte daIRowSelectionEventArgs interface não consistem mais nas chaves de linha dos elementos selecionados (quando a grade definiu uma chave primária), mas agora, de qualquer forma, os dados da linha são emitidos. Quando a grade está trabalhando com dados remotos e aprimaryKey está definido - para as linhas selecionadas que não fazem parte da visualização da grade, um objeto de dados parcial será emitido.

    Se seu código norowSelectionChanging handler de eventos dependia de ler primaryKeys a partir do argumento de evento, atualize-o da seguinte forma:

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

    • Mudança Comportamental Quando a linha selecionada é excluída do componente da grade,rowSelectionChanging o evento não é emitido.

    • 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(por exemplo, o parâmetro coluna em)igxFilterCellTemplate​
        • IgxGridCell-CellType(por exemplo, o parâmetro da célula noigxCell template)

    • Ignite UI for Angular depende do tema igniteui. Adicione a seguinte configuração de pré-processador no seuangular.json arquivo.

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

    • Mudança Quebrada- Todas as variáveis globais CSS para configuração de tema, cores, elevações e tipografia mudaram o prefixo de--igx para--ig. Essa mudança não afeta as variáveis globais dos componentes;

      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

    • Mudança Quebrada- Ograys argumento de entrada foi renomeado paragray.
      Veja como isso afetará o código existente:

      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.

    • Mudança Quebrada- A função de paleta agora exige que uma cor de superfície seja passada, enquanto passar um valor para agray cor é opcional. Se não for fornecido um valor para a cor base cinza, ele será gerado automaticamente com base na claridade da cor da superfície – a cor clara resulta em uma cor base preta (#000), enquanto uma cor escura gera uma cor base cinza branca (#fff). Quando você está gerando uma paleta, é preciso lembrar que não existem mais valores padrão para info, sucesso, erro e cores de aviso. Você precisa defini-los explicitamente se quiser usá-los. Você também pode pegar essas cores de uma paleta existente se não quiser criar os valores sozinho.

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

    • Mudança Quebrada- A função de elevações foi removida, agora você pode configurar as cores das elevações usando oconfigure-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);
}

    Grid Toolbar

    • Mudança Quebrada- OsIgxGridToolbarTitleDirective eIgxGridToolbarActionsDirective foram convertidos em componentes, mantendo apenas o seletor de elementos. Para apps que usam a marcação de elemento preferencial de<igx-grid-toolbar-title> e<igx-grid-toolbar-actions> não deve haver mudança funcional. Aplicativos que usam asigxGridToolbarTitle diretivas eigxGridToolbarActions em outros elementos precisarão converter esses para os elementos mencionados:

      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

    • Mudança de Última Hora- Todas as folhas de estilo específicas do RTL foram removidas. Ignite UI temas agora suportam direção RTL por padrão. Usuários que já usaram*-rtl.css temas específicos anteriormente devem migrar para os arquivos de temas regulares.

    From 13.0.x to 13.1.x

    Geral

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • Breaking Change- A propriedade dasmovable colunas foi descontinuada. Use a propriedade da grademoving exposta:

        <igx-grid [moving]="true">
</igx-grid>

    • IgxHierarchicalGrid

      • Breaking Change- O serviço público de API para os componenteshgridAPI igxHierarchicalGrid e igxRowIsland é renomeado paragridAPI.

    • IgxToast

      • Quebrando Mudança- Aigx-toast propriedade obsoletaposition foi removida. Sugerimos usarpositionSettings a propriedade da seguinte forma:

        @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

      • Mudança Quebrada- A animação padrão de abertura/fechamento das configurações de posição foi alterada parafadeIn /fadeOut.

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • Breaking Change- As seguintes entradas obsoletas foram removidas -showToolbar,toolbarTitle​columnHiding,,columnHidingTitle,,hiddenColumnsText,columnPinning​columnPinningTitle,.pinnedColumnsText UseIgxGridToolbarComponent,IgxGridToolbarHidingComponent​IgxGridToolbarPinningComponent em vez disso.

      • Mudança Quebrada- Ao adicionar umigx-toolbar componente, agora você deve especificar manualmente quais recursos deseja ativar - Ocultação de Colunas, Pinação, Exportação do Excel. O Filtragem Avançada pode ser ativada pelaallowAdvancedFiltering propriedade de entrada na grade, mas é recomendado habilitá-la declarativamente com marcação, assim como com os outros recursos.

      • Breaking Change- OrowSelected evento foi renomeado pararowSelectionChanging refletir melhor sua função.

      • Breaking Change- OcolumnSelected evento foi renomeado paracolumnSelectionChanging refletir melhor sua função.

      • Breaking Change-columnsCollectionfoi removido. Usecolumns em vez disso. Se em certas ocasiões retornaremcolumns um array vazio, consulte as colunas usandoViewChildren e acesse aquelas emngAfterViewInit:

        @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
public columns: QueryList<IgxColumnComponent>;

      • Mudança de quebra- ao aplicar uma diretiva personalizada na grade, injete oIGX_GRID_BASE token no construtor para obter referência à grade host:

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

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

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

    • RowDirective, RowType

      • Propriedades Breaking Change​rowData​rowID e são removidas deRowDirective e das classes que implementam aRowType interface. Usedata ekey em seu lugar. Useng update para migração automática. A migração automática não poderá captar alguns exemplos de templates, onde o objeto de contexto template não é digitado:

        <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

      • Exposto umgroupStrategy input que funciona de forma semelhantesortStrategy, permitindo a personalização do comportamento de agrupamento da grade.

    • 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

      • EntradabuttonText nova exposta que define o texto exibido dentro do botão suspenso na barra de ferramentas.

    • IgxCombo

      • Entrada adicionadagroupSortingDirection, que permite definir a ordem de ordenação dos grupos.

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

      • Adicionaram novas diretrizes para re-templar indicadores de ordenação de cabeçalhos -IgxSortHeaderIconDirective,IgxSortAscendingHeaderIconDirective eIgxSortDescendingHeaderIconDirective.

    • IgxDialog

      • AdicioneifocusTrap entrada para definir se o foco da tecla Tab fica preso no diálogo quando aberto. É o padrão paratrue isso.

    • IgxColumnActionsComponent

      • Alteração interruptiva- A seguinte entrada foi removida
        • Entradacolumns. UseigxGrid columns input em vez disso.

    • IgxCarousel

      • Mudanças Quebrantes- O tipoCarouselAnimationType de animação do carrossel é renomeado paraHorizontalAnimationType.

    • IgxGridStateDirective- agora suportadisableHiding coluna prop e grupos de coluna

    Temas

    • A propriedade de componentecolor Icon foi descontinuada. Usestyle.color a propriedade CSS para mudar a cor padrão dele. Exemplos:
    <igx-icon [style.color]="'#e41c77'">home</igx-icon>

    <igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>
    • Módulos Sass: O motor de temática mudou para módulos Sass. Essa mudança significa que todas as funções da biblioteca de temas (temas componentes, etc.), mixins (mixins componentes, etc.) e variáveis agora vêmforwarded de um único arquivo. Para usar corretamente a biblioteca de temas do Sass, seu projeto deve utilizar o Dart Sass versão 1.33.0 ou posterior e alterar todas as importações da biblioteca de temas de:
    // 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:

    • As variáveis da paleta CSS não se referem mais aos valores HEX, representam uma lista de 3 valores H, S e L, o que significa que devem ser passados para ashsl funções CSS ouhsla ou.

    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.

    Se você não excluiu nenhum tema componente do tema global, mas ainda assim quiser criar seus próprios temas de substituição personalizados usando ocss-vars mixin, certifique-se de que o tema receba a paleta correta e o esquema correspondente:

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

    Caso seus temas personalizados de componentes sejam declarados em um arquivo Sass separado, além do globalstyles.scss, certifique-se de que ocore mixin também esteja incluído.

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

    Para entender melhor o Sistema de Módulos Sass, você pode ler este ótimo artigo de Miriam Suzanne;

    From 12.0.x to 12.1.x

    Grids

    • Alterações significativas:

      • IgxPaginatorComponent- A forma como o Paginador é instanciado na grade mudou. Agora é um componente separado projetado na árvore da grade. Assim, a[paging]="true" propriedade é removida de todas as grades e todas as outras propriedades relacionadas ao paginador na grade são obsoletas. Recomenda-se seguir as orientações para habilitarGrid Paging recursos descritas no tópico Paginação.

      • IgxPageSizeSelectorComponenteIgxPageNavigationComponent são introduzidos para facilitar a implementação de qualquer conteúdo personalizado:

        <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 - para definir um template personalizado, use oigx-paginator-content

      • Especificidades do HierarchicalGrid - O uso a seguir da*igxPaginator Diretiva é necessário para habilitar a paginação em 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>

      • Embora a migração mova o conteúdo do seu template para dentro doigx-paginator-content conteúdo, pode não resolver todas as vinculações do template. Certifique-se de verificar seus arquivos template após a migração. As seguintes ligações devem ser alteradas manualmente, pois essas propriedades foram removidas (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 não estão mais expostos na API pública. Veja as seções abaixo para um guia detalhado sobre como atualizar para o novoIgxGridCell.

    • Descontinuação da grade:

      • O padrão DI para fornecerIgxGridTransaction está obsoleto. O seguinte ainda funcionará, mas é recomendado refatorá-lo, pois provavelmente será removido em uma versão futura:

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

        Para alcançar o comportamento acima, você deve usar a entrada recém-adicionadabatchEditing:

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

      • getCellByColumnVisibleIndexagora está obsoleto e será removido na próxima versão principal. UsegetCellByKey,getCellByColumn em vez disso.

    IgxGridCell migration

    • ​IgxGridCellComponent,IgxTreeGridCellComponent,IgxHierarchicalGridCellComponent,IgxGridExpandableCellComponent não são mais expostos na API pública​.​​​​

    • APIs públicas, que antes retornavam uma instância de uma das anteriores, agora retornam uma instância deIgxGridCell:

    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[]
    • cellpropriedade nosIGridCellEventArgs argumentos de evento emitidos pelos eventos cellClick, selected, contextMenu e doubleClick agora é uma instância deIgxGridCell
    • let-cellO template de propriedade na célula está agoraIgxGridCell.
    • getCellByColumnVisibleIndexagora está obsoleto e será removido na próxima versão principal. UsegetCellByKey,getCellByColumn em vez disso.

    Observação:

    • ng update migrará os usos de IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent, como importações, tipos e casts. Se um local no seu código usando qualquer um dos itens acima não for migrado, basta remover a digitação/cast ou mudá-lo comIgxGridCell isso.
    • 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

    Devido a reclamações relacionadas a avisos de compilação (veja #9793), agora usamos amath.div função; Essa funcionalidade é suportada pelo Dart Sass a partir da versão 1.33.0.

    Solução

    Se por algum motivo você vir erros de compilação do Sass dizendomath.div que não é uma função conhecida, significa que você está usando uma versão desatualizada do Sass no seu projeto.

    1. Atualização para a versão mais recente do Angular usandong update Angular 12.1.0+ usa o compilador dart-sass por padrão.

      ng update [options]

      Se por algum motivo você não usar a CLI Ignite UI / Angular, você precisará substituirnode-sass porsass isso no seu projeto Node.

      npm uninstall node-sass
npm install sass --save-dev

    2. 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:

      • IgxAvatarO tema foi simplificado. O número de parâmetros de tema (avatar-theme) foi significativamente reduzido e não inclui mais parâmetros prefixados(icon-*,initials-*,image-*) nem parâmetros sufixos(border-radius-*). Atualizações realizadas comng update migrarão temas de avatar existentes, mas alguns ajustes adicionais podem ser necessários para compensar a ausência de parâmetros prefixados e sufixos.

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

      • IgxButtonO tema foi simplificado. O número de parâmetros de tema (button-theme) foi significativamente reduzido e não inclui mais parâmetros prefixados (flat-*,raised-*, etc.). Atualizações realizadas comng update migrarão temas de botões existentes, mas alguns ajustes adicionais podem ser necessários para compensar a ausência de parâmetros prefixados.

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

        Você precisa criar um tema separado para cada tipo de botão e definir um seletor CSS.

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

        Como você pode ver, como osbutton-theme parâmetros agora têm os mesmos nomes para cada tipo de botão, precisamos definir nossos temas de botão para um seletor CSS para ter cores diferentes para diferentes tipos.

        Aqui você pode ver todas as propriedades disponíveis dobutton-theme

      • Otypography mixin não é mais implicitamente incluído comcore. Para usar nossos estilos tipográficos, você precisa incluir o mixin explicitamente depoiscore e antestheme:

        // in styles.scss

@include core();

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

@include theme();
        Important

        Ocore mixin deve sempre ser incluído primeiro.

        Para cada tema incluído em Ignite UI for Angular fornecemos variáveis específicasfont-family​type-scale e que você pode usar:

        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

      • A nova estrutura define componentes inferiores de itens de navegação, cada um envolvendo um cabeçalho e um componente de conteúdo. Os cabeçalhos geralmente contêm um ícone (Material guidelines), mas podem muito bem ter um rótulo ou qualquer outro conteúdo personalizado.

      • Para fins de estilização do cabeçalho, introduzimos duas novas diretivas -igxBottomNavHeaderLabelandigxBottomNavHeaderIcon.

      • Como o componente cabeçalho agora permite adicionar qualquer conteúdo, aigxTab diretiva, que antes era usada para retemplatear o cabeçalho da aba, foi removida porque não é mais necessária.

      • Quando o componente é usado em um cenário de navegação, arouterLink diretiva precisa ser anexada ao componente do cabeçalho.

        <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

      • Asid​itemStyle​panels​viewTabs​contentTabs propriedadestabs e propriedades foram removidas. Atualmente, aitems propriedade retorna a coleção de abs.
      • As seguintes propriedades foram alteradas:
        • A propriedade doisSelected item de aba foi renomeada paraselected.
        • AselectedTab propriedade foi renomeada paraselectedItem.
      • OsonTabSelected eventos eonTabDeselected foram removidos. Introduzimos três novos eventos,selectedIndexChanging​selectedIndexChange​selectedItemChange que oferecem mais flexibilidade e controle sobre a seleção das abas. Infelizmente, ter uma migração adequada para essas mudanças de eventos é, no mínimo, complicado, então quaisquer erros devem ser tratados no nível do projeto.

    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.

      • Para fins de estilização do cabeçalho, introduzimos duas novas diretivas -igxTabHeaderLabelandigxTabHeaderIcon.

      • Como o componente cabeçalho agora permite adicionar qualquer conteúdo, aigxTab diretiva, que antes era usada para retemplatear o cabeçalho da aba, foi removida porque não é mais necessária.

      • Quando o componente é usado em um cenário de navegação, arouterLink diretiva precisa ser anexada ao componente do cabeçalho.

        <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

      • Asid​groups​viewTabs​contentTabs propriedadestabs e propriedades foram removidas. Atualmente, aitems propriedade retorna a coleção de abs.
      • As seguintes propriedades foram alteradas:
        • A propriedade doisSelected item de aba foi renomeada paraselected.
        • AselectedTabItem propriedade foi encurtada paraselectedItem.
        • Atype propriedade, com seu contentFit e opções fixas, não está mais disponível. O modo de dimensionamento e posicionamento do cabeçalho é atualmente controlado pelatabAlignment propriedade de entrada, que aceita quatro valores diferentes - start (padrão), center, end e justify. O tipo antigocontentFit corresponde ao valor de alinhamento atualstart e o tipo antigofixed- ao valor atualjustify.
      • OstabItemSelected eventos etabItemDeselected foram removidos. Introduzimos três novos eventos,selectedIndexChanging​selectedIndexChange​selectedItemChange que oferecem mais flexibilidade e controle sobre a seleção das abas. Infelizmente, ter uma migração adequada para essas mudanças de eventos é, no mínimo, complicado, então quaisquer erros devem ser tratados no nível do projeto.

    IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

    • ​IgxGridRowComponent,IgxTreeGridRowComponent,IgxHierarchicalRowComponent,IgxGridGroupByRowComponent não são mais expostos na API​ pública.​​​​
    • APIs públicas, que antes retornavam uma instância de uma das anteriores, agora retornam objetos que implementam a interface públicaRowType:
    const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;

    Embora a API pública deRowType seja a mesma que a IgxRowComponent e outros usavam para expor, por favor, note:

    • toggle, exposto pelo IgxHierarchicalRowComponent, não está disponível. Usarexpanded a propriedade para todos os tipos de linhas:
    grid.getRowByIndex(0).expanded = false;

    *row.rowData_ e row.rowID estão obsoletos e serão totalmente removidos a partir da versão 13. Por favor, use row.data e row.key em vez disso.

    • a propriedade row nos argumentos de evento emitidos por onRowPinning, e a propriedade dragData nos argumentos de evento emitidos por onRowDragStart,onRowDragEnd agora estão implementando​​RowType
    • ng update migrará a maioria dos usos de IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent, assim como importações, tipos e casts. Se um local no seu código usando qualquer um dos itens acima não for migrado, basta remover a digitação/cast ou mudá-lo comRowType isso.
    • getRowByIndex agora retornará umRowType objeto, se a linha nesse índice for uma linha de resumo (anteriormente usada para retornada indefinida). row.isSummaryRow e row.isGroupByRow retornam verdadeiro se a linha no índice for uma linha de resumo ou um grupo por linha.

    IgxInputGroupComponent

    • Adisabled propriedade foi removida. A propriedade era enganosa, pois o estado do grupo de entrada era sempre gerenciado pelo subjacenteigxInput.

      • O Runningng update lida com todas as instâncias em que[disabled] foram usadas como@Input templates in.

      • Se você está referenciando a propriedade em um.ts arquivo:

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

        Você deve atualizar manualmente seu código para referenciar a propriedade dadisabled diretiva de entrada subjacente:

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

    IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

    • Avalue propriedade para IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent agora aceita o formato de string ISO 8601. Isso significa que ovalue tipo pode serDate ou.string​
    • AinputFormat propriedade IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent agora não aceitay para a parte do ano. Você deveria atualizar tambémyy.

    From 10.2.x to 11.0.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • A forma como a barra de ferramentas é instanciada na grade mudou. Agora é um componente separado projetado na árvore da grade. Assim, ashowToolbar propriedade é removida de todas as grades e todas as outras propriedades relacionadas à barra de ferramentas na grade são obsoletas. Recomenda-se seguir a forma recomendada para ativar recursos da barra de ferramentas, conforme descrito no tópico Barra de Ferramentas.
      • AigxToolbarCustomContent diretriz é removida. Embora a migração mova o conteúdo do seu template para dentro do conteúdo da barra de ferramentas, ela não tenta resolver os bindings do template. Certifique-se de verificar seus arquivos template após a migração.
      • 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
      • Como removemos asIgxExcelStyleSortingTemplateDirective diretivas eIgxExcelStyleHidingTemplateDirective​IgxExcelStyleMovingTemplateDirective​IgxExcelStylePinningTemplateDirective​IgxExcelStyleSelectingTemplateDirective as que são remoídas para plantar algumas partes do menu de filtro estilo Excel, você pode usar as diretivas recém-adicionadas para plantar as áreas de operações de coluna e filtro -IgxExcelStyleColumnOperationsTemplateDirectiveand.IgxExcelStyleFilterOperationsTemplateDirective Também expomos todos os componentes internos do menu de filtro estilo Excel para que possam ser usados dentro de templates personalizados. Você pode encontrar mais informações sobre as novas diretivas modelo no Tópico de Filtragem em Estilo Excel.
    • IgxGrid

      • OselectedRows() método foi refatorado em uma propriedade de entrada chamada . Essa mudança de ruptura permite que os usuários alterem facilmente o estado de seleção da grade em tempo de execução. A pré-seleção de linhas também é suportada. Todas as instâncias em que oselectedRows() método é chamado precisam ser reescritas sem parênteses.

      • Vincular àselectedRows propriedade de entrada poderia ser algo assim:

        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

      • A propriedade de exibição do item suspenso foi alterada deflex parablock. Fizemos isso para habilitar o texto truncado por padrão. Devido a essa mudança, se houver mais do que texto no conteúdo do item suspenso, o layout precisa ser gerenciado no nível da aplicação.

      • 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

    Devido a uma alteração interrompida em Angular 9 provedores Hammer não são mais adicionados implicitamente, por favor, consulte o documento a seguir para detalhes: Por isso, os seguintes componentes precisamHammerModule ser importados no módulo raiz da aplicação para que as interações por toque funcionem como esperado:

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

    Devido a mudanças de nome feitas em alguns dosEnumerations que exportamos, é necessário fazer atualizações manuais para seus membros. Aqui está uma lista de todas as mudanças feitas que exigem atualização manual:

    • AvatarType.DEFAULT-> IgxAvatarType.CUSTOM
    • Tipo.DEFAULT-> IgxBadgeType.PRIMARY
    • IgxCardType.DEFAULT-> IgxCardType.ELEVATED
    • IgxCardAçõesLayout.DEFAULT-> IgxCardActionsLayout.START
    • IgxDividerType.DEFAULT-> Tipo IgxDivider.SOLID
    • IgxProgressType.DANGER-> IgxProgressType.ERROR

    Ong update processo atualizará todos os nomes de enumeração, comoAvatarType,Type, et al. paraIgxAvatarType eIgxBadgeType, respectivamente. Todos os outros nomes dos membros da enumeração permanecem inalterados.

    From 8.1.x to 8.2.x

    • IgxDrag

      • ComohideBaseOnDrag as entradas de andvisible estão sendo descontinuadas, para alcançar a mesma funcionalidade na sua aplicação, você pode usar qualquer forma de ocultar o elemento base que Angular fornece. Um exemplo é definir ovisibility estilo parahidden, já que ele só vai tornar invisível e manter o espaço que ocupa no 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;
}

      • ComoanimateOnRelease e também estão sendo obsoletos, qualquerdropFinished() uso de método deve ser substituído pordropFinished()​transitionToOrigin(). Caso contrário, você precisaria chamartransitionToOrigin() dependendo de quando gostaria que o elemento arrastado voltasse para sua posição original. Note que, se a posição do DOM do elemento arrastado for alterada, sua localização original também mudará com base nisso.

    • IgxDrop

      • Devido à estratégia padrão de drop fornecida com aIxgDrop diretriz não é mais aplicada por padrão, para continuar mantendo o mesmo comportamento, é necessário definir a nova entradadropStrategy como a implementação fornecidaIgxAppendDropStrategy.

        <div igxDrop [dropStrategy]="appendStrategy"></div>

        import { IgxAppendDropStrategy } from 'igniteui-angular';
// import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package

public appendStrategy = IgxAppendDropStrategy;

      • Qualquer uso de interfacesIgxDropEnterEventArgs deveIgxDropLeaveEventArgs ser substituído porIDragBaseEventArgs.

      • Além disso, qualquer uso daIgxDropEventArgs interface deve ser substituído porIDropDroppedEventArgs.

    • Diretiva IgxRowDragDirective

      • IRowDragStartEventArgseIRowDragEndEventArgs mudar o nome de Argument para deixar mais claro a que ele se relaciona.owner argumento é renomeado paradragDirective. Oowner argumento agora faz referência ao componente proprietário. Se seu código fosse assim:

        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

      • A forma como aigx-combo seleção e a vinculação de dados é alterada.

      • Se a entrada [] dovalueKey combo estiver definida, o controle procurará essa propriedade específica no array passado de itens de dados ao realizar a seleção. Todos os eventos de seleção são tratados com o valor da propriedade dos itensvalueKey de dados. Todos os combos especificadosvalueKey devem ter sua seleção/vinculação bidirecional consistindo apenas nos valores da propriedade do objeto especificados na entrada:

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

      • Se a combinação não tiver umvalueKey definido, todos os eventos de seleção são tratados com igualdade (===). Todos os combos que não possuem umvalueKey especificado devem ter sua seleção/vinculação bidirecional com referências aos seus itens de dados:

        <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

    • Oigx-paginator componente é introduzido como um componente independente e também é usado nos componentes da Grade. Lembre-se que, se você configurou o sitepaginationTemplate, pode ser necessário modificar seu CSS para exibir a paginação corretamente. Isso se deve ao fato de que o template não é mais aplicado em um contêiner específico para paginação com regras CSS para centralizar o conteúdo, então talvez você precise adicioná-los manualmente. O estilo deve ser algo parecido a:
    <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

    • Ao atualizar, se você encontrar o seguinte erroPackage "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5")., deve atualizar@angular/core o pacote primeiro. Isso está relacionado a esse problema conhecido de Angular CLI
    • Ao atualizar oigniteui-angular pacote, se você encontrar o seguinte erroPackage "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208"), deve atualizar usandong update igniteui-angular --force o processo. Isso pode acontecer se você atualizar@angular/core e@angular/cli antes deigniteui-angular atualizar.

    From 7.2.x or 7.3.x to 7.3.4

    • Se você usar ofilterGlobal método deIgxGrid,IgxTreeGrid ouIgxHierarchicalGrid deve saber que ocondition parâmetro não é mais opcional. Quando ofilterGlobal método é chamado com uma condição inválida, ele não limpa os filtros existentes para todas as colunas.

    From 7.1.x to 7.2.x

    • Se você usa um IgxCombo comcombo.value ele, deve saber que agoracombo.value é só um que apanha.
    • Se você usar,IgxTextHighlightDirective deve saber que apage propriedade de entrada está obsoleta,rowIndex​columnIndex epage as propriedades daIActiveHighlightInfo interface também estão obsoletas. Em vez disso,row ecolumn propriedades opcionais são adicionadas.
    • Se você usar obutton-theme, deve saber que foi$button-roundness substituído para cada tipo de botão por:$flat-border-radius,$raised-border-radius,$outline-border-radius,$fab-border-radius,.$icon-border-radius​

    From 7.0.x to 7.1.x

    • Se você usar um IgxGrid com resumos na sua aplicação, deve saber que agora oIgxSummaryOperand.operate() método é chamado com dados vazios para calcular a altura necessária para a linha de resumo. Para operandos de resumo personalizados, o método deve sempre retornar um array de IgxSummaryResult com o comprimento correto.

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

    Desde a versão 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

    • Se você usa um controle IgxCombo na sua aplicação e configurou essaitemsMaxWidth opção, deve mudar essa opção paraitemsWidth