Ignite UI for Angular 21.0 Está Disponível! O que há de novo e empolgante

À medida que os desenvolvedores buscam aproveitar as mais recentes inovações Angular, ter ferramentas que acompanhem a evolução do framework torna-se essencial. Para alinhar Ignite UI for Angular 21 com tudo de novo, lançamos recursos e melhorias empolgantes.

Com este lançamento, Ignite UI for Angular não só adiciona suporte completo para o Angular 21, como também introduz melhorias significativas no desempenho do filtro de grade, um novo Grid PDF Exporter e um AI Chat Component.

Mais um anúncio relacionado à Ignite UI for Angular, como parte do nosso conjunto de ferramentas de interface, estamos capacitando a comunidade open-source ao fornecer um conjunto de 50+ componentes open-source sob a licença MIT em Angular, React, Blazor e Web Components. Esta é uma grande expansão da nossa missão: capacitar todo desenvolvedor, em qualquer lugar, com ferramentas modernas, repletas de recursos e preparadas para o futuro para construir aplicações web de alto desempenho para qualquer cenário. Você pode encontrar todos os detalhes no blog "Ignite UI Lança 50+ Componentes Potentes de Código Aberto".

Vamos explorar tudo em detalhes.

Desempenho Otimizado de Filtragem: Estabelecendo um Novo Padrão

Components: Angular Data Grid, Angular Tree Grid, Angular Hierarchical Grid, Angular Pivot Grid

No Infragistics, desempenho não é apenas um objetivo — é uma promessa. Após entregar otimizações notáveis de ordenação em Ignite UI for Angular 20.1, voltamos nossa atenção para o desempenho da filtragem. Para aplicações que gerenciam conjuntos de dados massivos, a velocidade de filtragem é fundamental, e elevamos o padrão mais uma vez.

Nos últimos ciclos de desenvolvimento, nossas equipes focaram no Filtragem no estilo Excel através de grades, mirando cenários com 100.000+ registros. Os resultados falam por si mesmos:

Opening Filter Dialog

• Coluna numérica: Mais de 3 vezes mais rápido
• Coluna de string: Mais de 4 vezes mais rápido
• Coluna ID (todas únicas): melhoria incremental, mas significativa (~11% mais rápida)

Applying Filter

• Coluna numérica: Mais de 9 vezes mais rápido
• Coluna de string: Mais de 5 vezes mais rápido
• ID column: More than 9x faster

Essas melhorias garantem que até mesmo as aplicações empresariais mais exigentes passem por filtragem ultrarrápida, proporcionando uma experiência de usuário mais suave e responsiva.

E não vamos parar por aqui – fique ligado para as próximas melhorias que vão redefinir os padrões de desempenho para todas as Ignite UI Grids.

Grid PDF Exporter

O serviço Ignite UI for Angular PDF Exporter oferece funcionalidades poderosas para exportar dados em formato PDF de várias fontes, incluindo arrays de dados brutos e componentes avançados de grade como IgxGrid, IgxTreeGrid, IgxHierarchicalGrid e IgxPivotGrid. A funcionalidade de exportação está encapsulada naIgxPdfExporterService classe, que permite a exportação contínua de dados para formato PDF com recursos abrangentes, incluindo suporte a documentos de várias páginas, quebras automáticas de página e opções de formatação personalizáveis.

Principais características:

Documentation for Ignite UI for Angular PDF Exporter service.

Angular AI Chat Component

O componente Ignite UI Chat oferece uma solução completa para construir interfaces conversacionais em suas aplicações. Seja criando uma ferramenta de suporte ao cliente, um espaço de trabalho colaborativo ou um assistente de chatbot, o componente Chat oferece os blocos de construção que você precisa: enviar e receber mensagens de texto, enviar anexos, exibir respostas rápidas a sugestões, mostrar indicadores de digitação quando o outro participante estiver escrevendo uma resposta.

Ao contrário de uma lista de mensagens estática, oChat componente é interativo e projetado para comunicação em tempo real. Ele gerencia entrada, renderização e interação do usuário, além de dar controle total sobre como mensagens e anexos são exibidos. Também expõe uma API de renderização extensa que permite sobrescrever qualquer parte do layout ou dos visuais.

Documentação para Ignite UI for Angular componente Chat.

Suporte a Múltiplos Pontos de Entrada

A biblioteca Ignite UI for Angular agora suporta múltiplos pontos de entrada para melhor balanceamento de árvores e divisão de código. Embora o ponto de entrada principal 'igniteui-angular' permaneça totalmente compatível com versões anteriores ao reexportar todos os pontos de entrada granulares, recomendamos migrar para os novos pontos de entrada para tamanhos ideais de pacotes.

Benefits:

• Melhor sacudir a árvore – componentes não utilizados não serão agrupados
• Divisão de código – cada componente pode ser carregado lentamente separadamente
• Tamanhos menores em pacotes – importe apenas o que você precisa
• Desempenho aprimorado na construção

Documentação para Ignite UI for Angular divisão de código e múltiplos pontos de entrada.

Complete o CHANGELOG para Ignite UI for Angular 21.0

Temas

• IgxButton
  • Breaking Change
    • Os seguintes parâmetros relacionados à sombra foram removidos dooutlined-button-theme e:flat-button-theme​
      • resting-shadow
      • hover-shadow
      • focus-shadow
      • active-shadow

Novos Recursos

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Adicionada funcionalidade de exportação de PDF aos componentes da grade. As grades agora podem ser exportadas para formato PDF junto com as opções existentes de exportação em Excel e CSV.

O novoIgxPdfExporterService segue o mesmo padrão dos exportadores do Excel e CSV:

import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular';

constructor(private pdfExporter: IgxPdfExporterService) {}

exportToPdf() {
    const options = new IgxPdfExporterOptions('MyGridExport');
    options.pageOrientation = 'landscape'; // 'portrait' or 'landscape' (default: 'landscape')
    options.pageSize = 'a4'; // 'a3', 'a4', 'a5', 'letter', 'legal', etc.
    options.fontSize = 10;
    options.showTableBorders = true;
    
    this.pdfExporter.export(this.grid, options);
}

O componente exportador da barra de ferramentas de grade agora inclui um botão de exportação de PDF:

<igx-grid-toolbar>
    <igx-grid-toolbar-exporter 
        [exportPDF]="true" 
        [exportExcel]="true" 
        [exportCSV]="true">
    </igx-grid-toolbar-exporter>
</igx-grid-toolbar>

Alterações significativas

Refatoração de Injeção de Dependência

• Todo DI interno agora usa ainject() API acrossigniteui-angular (sem mais DI de construtor no código da biblioteca).
• Se você estender nossos componentes/serviços ou chamar diretamente seus construtores, remova parâmetros DI e mude parainject() (por exemplo,protected foo = inject(FooService);).
• O uso de aplicativos via templates permanece o mesmo; Não é necessária ação a menos que você subclasse/sobrescrita nossos tipos.

Suporte a Múltiplos Pontos de Entrada

A biblioteca agora suporta múltiplos pontos de entrada para melhorar o balanceamento da árvore e a divisão de código. Embora o ponto de entrada principal (igniteui-angular) permaneça totalmente compatível com versões anteriores ao reexportar todos os pontos de entrada granulares, recomendamos migrar para os novos pontos de entrada para tamanhos ótimos de bundles.

Pontos de Entrada:

• igniteui-angular/core– Utilidades centrais, serviços e tipos de base
• igniteui-angular/directives– Diretrizes comuns
• Pontos de entrada específicos de componentes:igniteui-angular/grids,igniteui-angular/input-group,igniteui-angular/drop-down, etc.
• Pontos de entrada específicos por grade para importações que podem ser ajustadas por árvores:
  • igniteui-angular/grids/core– Infraestrutura de grade compartilhada (colunas, barra de ferramentas, filtragem, ordenação, etc.)
  • igniteui-angular/grids/grid– Componente padrão da grade (IgxGridComponent)
  • igniteui-angular/grids/tree-grid– Componente da grade em árvore (IgxTreeGridComponent)
  • igniteui-angular/grids/hierarchical-grid– Componente hierárquico da grade (IgxHierarchicalGridComponent,IgxRowIslandComponent)
  • igniteui-angular/grids/pivot-grid – Pivot grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

Migração: Ang update migração vai pedir que você migre opcionalmente suas importações para os novos pontos de entrada. Se você optar por não migrar, pode continuar usando o ponto de entrada principal com total retrocompatibilidade.

Para migrar manualmente depois:

ng atualização igniteui-angular ---migra-apenas --from=20.1.0 --para=21.0.0

Relocação de Componentes:

• Input directives (IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective) → igniteui-angular/input-group
• IgxAutocompleteDirective → igniteui-angular/drop-down
• IgxRadioGroupDirective → igniteui-angular/radio

Renomeação de Tipos (para evitar conflitos):

• Direction → CarouselAnimationDirection (in carousel)

Benefits:

• Melhor sacudir a árvore – componentes não utilizados não serão agrupados
• Divisão de código – cada componente pode ser carregado lentamente separadamente
• Tamanhos menores em pacotes – importe apenas o que você precisa
• Desempenho aprimorado na construção

Consulte a documentação do Formato de Pacote Angular para mais detalhes sobre os pontos de entrada.

Para encerrar tudo...

Perfeitamente criada para compatibilidade, Ignite UI for Angular é a biblioteca que permite aproveitar o poder das tecnologias mais recentes e dos principais lançamentos. Comprometidos em fornecer a você o melhor kit de ferramentas de interface do usuário Angular e insights relacionados, nosso objetivo é equipá-lo com mais know-how, novos recursos, desempenho aprimorado e estabilidade aprimorada. Algumas das melhorias foram adicionadas graças às solicitações de usuários como você por meio de nosso repositório Ignite UI for Angular GitHub. Com isso em mente, estamos sempre abertos a sugestões e feedbacks – isso nos faz crescer e responder melhor às suas necessidades de desenvolvimento.

Se precisar de mais detalhes, recomendamos que você confira nosso:

• Canal do Discord
• Discussões do GitHub
• Roteiro
• Canal do YouTube