Usando componentes independentes com Ignite UI for Angular

Angular 14 introduziu o conceito de componentes autônomos que permite uma maneira simplificada de criar aplicativos, reduzindo a necessidade de uso NgModules. Os componentes independentes estavam em visualização do desenvolvedor até 15 Angular. Para suportar esse novo paradigma, todos os componentes Ignite UI for Angular agora são exportados como standalone com a versão 16.0.0. A partir de 19 Angular, todos os componentes são autônomos por padrão. Todos os existentes NgModules ainda são exportados pela biblioteca para compatibilidade com versões anteriores. No entanto, eles não declaram mais nenhum dos componentes Ignite UI for Angular. Em vez disso, eles importam e exportam os standalone componentes.

How to use the new standalone components

A partir do Angular 16 e Ignite UI for Angular 16.0, agora você pode simplesmente adicionar as importações que seu standalone componente precisa na imports propriedade. No exemplo IGX_GRID_DIRECTIVES a seguir pode ser usado para importar todos os componentes e diretivas relacionados à grade.

import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
})

Mas você também pode importar todos os componentes usados pelo seu standalone componente individualmente. Exemplo com o IgxGridComponent e IgxColumnComponent quando apenas esses dois são usados por outro componente é o seguinte.

import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe]
})

Além disso, como todos os módulos existentes são preservados, mas agora importam e exportam apenas os componentes independentes, você também pode usá-los para seu componente autônomo.

// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
import { IgxGridModule } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    imports: [IgxGridModule, AsyncPipe]
})

Utility Directives

O IGX_GRID_DIRECTIVES mostrado nos exemplos anteriores é uma diretiva de utilitário que exporta todos os componentes e diretivas relacionados à rede. A tabela a seguir lista todas as novas diretivas de utilitário disponíveis no Ignite UI for Angular.

Coleção Diretiva	Descrição
IGX_ACCORDION_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao acordeão.
IGX_ACTION_STRIP_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à faixa de ação.
IGX_BANNER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao banner.
IGX_BOTTOM_NAV_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à navegação inferior.
IGX_BUTTON_GROUP_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao grupo de botões.
IGX_CALENDAR_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao calendário.
IGX_CARD_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao cartão.
IGX_CAROUSEL_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao carrossel.
IGX_CHIPS_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao chip.
IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à barra de progresso circular.
IGX_COMBO_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao combo.
IGX_DATE_PICKER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao seletor de data.
IGX_DATE_RANGE_PICKER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao seletor de períodos.
IGX_DIALOG_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à caixa de diálogo.
IGX_DRAG_DROP_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao recurso de arrastar e soltar.
IGX_DROP_DOWN_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao menu suspenso.
IGX_EXPANSION_PANEL_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao painel de expansão.
IGX_GRID_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à grade.
IGX_HIERARCHICAL_GRID_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à grade hierárquica.
IGX_INPUT_GROUP_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao grupo de entrada.
IGX_LINEAR_PROGRESS_BAR_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à barra de progresso linear.
IGX_LIST_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à lista.
IGX_NAVBAR_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à barra de navegação.
IGX_NAVIGATION_DRAWER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à gaveta de navegação.
IGX_PAGINATOR_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao paginador.
IGX_PIVOT_GRID_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à grade dinâmica.
IGX_PROGRESS_BAR_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à barra de progresso linear e circular.
IGX_QUERY_BUILDER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao construtor de consultas.
IGX_RADIO_GROUP_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao grupo de rádio.
IGX_SELECT_DIRECTIVES	Exporta todos os componentes e diretivas relacionados selecionados.
IGX_SIMPLE_COMBO_DIRECTIVES	Exporta todos os componentes e diretivas simples relacionados a combinações.
IGX_SLIDER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao controle deslizante.
IGX_SPLITTER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao divisor.
IGX_STEPPER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao stepper.
IGX_TABS_DIRECTIVES	Exporta todos os componentes e diretivas relacionados a guias.
IGX_TIME_PICKER_DIRECTIVES	Exporta todos os componentes e diretivas relacionados ao seletor de tempo.
IGX_TOOLTIP_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à dica de ferramenta.
IGX_TREE_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à exibição em árvore.
IGX_TREE_GRID_DIRECTIVES	Exporta todos os componentes e diretivas relacionados à grade de árvore.

Additional Resources

Tópicos relacionados:

• Componentes autônomos
• Introdução ao Ignite UI for Angular
• Renderização do lado do servidor com Angular

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub