Ignite UI for Angular 20.1 foi lançado! O que há de novo e emocionante?

Lutando contra complexidades em seu código? Bem, a versão Ignite UI for Angular 20.1 tem tudo a ver com simplificar e facilitar seus fluxos de trabalho e processos de desenvolvimento. Dobramos a aposta em fazer com que a grade Angular funcione melhor para você com novos recursos e aprimoramentos de desempenho. Com complementos poderosos, como mesclagem de células, que melhora a legibilidade eliminando valores duplicados, e fixação de coluna de lado duplo para máxima flexibilidade e controle, você pode fornecer exibições de dados mais limpas, conjuntos de dados otimizados e uma experiência de usuário mais suave. Concentre-se na construção, não na depuração.

Aqui está tudo de novo em um piscar de olhos.

Recurso de mesclagem de células de grade

O Ignite UI for Angular Grids fornece um recurso de mesclagem de células que combina duas ou mais células adjacentes com o mesmo valor em uma única célula maior. A mesclagem é aplicada verticalmente em uma coluna e ajuda a melhorar a legibilidade, reduzindo valores duplicados. O recurso pode ser configurado para mesclar células por padrão, correspondendo valores de dados ou aplicando uma condição personalizada.

O recurso Mesclagem de células está disponível para:

Pino da coluna em grade em ambos os lados

Com o Ignite UI for Angular 20.1, você pode especificar cada local de fixação de coluna separadamente, permitindo fixar colunas em ambos os lados da grade para maior conveniência, otimização mais fácil de conjuntos de dados e obtenção da experiência do usuário desejada para seu aplicativo Angular.

A fixação de coluna em ambos os lados está disponível para Angular Grade de Dados, Grade de Árvore Angular e Angular Grade Hierárquica.

Ultrapassando os Limites do Desempenho Angular Grid

Na Infragistics, sempre nos orgulhamos de oferecer as redes de Angular mais rápidas do mundo e agora estamos levando o desempenho para o próximo nível. Nos últimos sprints, nossas equipes de desenvolvimento se concentraram em otimizar o núcleo de nossa biblioteca de componentes Angular: Grade de Dados, Grade de Árvore e Grade Hierárquica.

Mais rápido do que nunca: o pipeline de classificação otimizado

A primeira melhoria significativa a ser lançada no Ignite UI for Angular 20.1 é uma otimização abrangente do pipeline de classificação. Sabemos que, para aplicativos que lidam com grandes conjuntos de dados, cada milissegundo conta. Nossos critérios iniciais de aceitação eram ambiciosos: comparar o desempenho do agrupamento e demonstrar pelo menos uma melhoria de 25% no tempo de execução para conjuntos de dados com 10.000 linhas ou mais.

Os resultados? Ultrapassamos esse benchmark, alcançando:

• Classificação 3x a 4x mais rápida para conjuntos de dados com 100.000 registros.
• Tempo geral de operação de dados reduzido em ~35% em grades, dentro do cenário de aplicação, com 100 mil linhas.

Esses aprimoramentos significam que seus aplicativos parecerão mais responsivos e fluidos do que nunca, mesmo ao lidar com grandes quantidades de dados. Esta é uma prova da dedicação de nossos desenvolvedores à melhoria contínua e sua paixão por oferecer a melhor experiência possível ao usuário.

Esta última otimização no Ignite UI for Angular 20.1 é uma demonstração clara de nossa filosofia. Acreditamos em ir além para capacitar os desenvolvedores com ferramentas que não são apenas ricas em recursos, mas também incrivelmente eficientes. Estamos entusiasmados em continuar essa jornada de inovação e ver os aplicativos incríveis que você criará com o poder aprimorado do Ignite UI for Angular.

Compatibilidade com Angular 20

Lançado em 9 de junho, com Ignite UI for Angular 20.0.0.

CHANGELOG completo para Ignite UI for Angular 20.1.0

Novos recursos

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Introduzido um novo recurso de mesclagem de células que permite configurar e mesclar células em uma coluna com base nos mesmos dados ou em outra condição personalizada, em uma única célula. Ele pode ser habilitado nas colunas individuais:<igx-column field="field" [merge]="true"></igx-column>A mesclagem pode ser configurada no nível da grade para aplicar:
    • onSort– somente quando a coluna está ordenada.
    • always– sempre, independentemente das operações de dados.
    <igx-grid [cellMergeMode]="'always'"> </igx-grid> O padrãocellMergeMode éonSort. A funcionalidade pode ser modificada definindo um customizadomergeStrategy na grade, caso sejam necessárias outras condições de fusão ou lógica para um cenário personalizado. Também é possível definir amergeComparer nas colunas individuais, caso seja necessário algum tratamento personalizado para um campo de dados específico.
  • Adicionou a possibilidade de fixar colunas individuais em um lado específico (início ou fim da grade), para que agora você possa ter fixação dos dois lados. Isso pode ser feito declarativamente definindo apinningPosition propriedade na coluna:<igx-column [field]="'Col1′" [pinned]='true' [pinningPosition]='pinningPosition'> </igx-column>public pinningPosition = ColumnPinningPosition.End; Ou com a API, via parâmetro opcional:grid.pinColumn('Col1', 0, ColumnPinningPosition.End); grid.pinColumn('Col2', 0, ColumnPinningPosition.Start); Se a propriedadepinningPosition não estiver definida em uma coluna, a coluna irá para a posição padrão especificada nas opções dapinning grade.columns​
• IgxCarousel
  • Adicioneiselect sobrecarga de métodos aceitando índice.
  this.carousel.select(2, Direção.NEXT);
• IgxDateRangePicker
  • Agora tem um conjunto completo de propriedades para personalizar o calendário:
    • headerOrientation
    • orientation
    • hideHeader
    • activeDate
    • disabledDates
    • specialDates
  • Assim como os seguintes modelos, disponíveis para personalizar o conteúdo do cabeçalho do calendário nodialog modo:
    • igxCalendarHeader
    • igxCalendarHeaderTitle
    • igxCalendarSubheader
  • Adicionadas novas propriedades:
    • usePredefinedRanges– Se renderizar intervalos predefinidos embutidos
    • customRanges– Permite ao usuário fornecer faixas personalizadas renderizadas como chips
    • resourceStrings– Permite ao usuário fornecer um conjunto de strings de recursos
  • Behavioral Changes
    • Adicionado botão cancelar à caixa de diálogo, permitindo que o usuário cancele a seleção.
    • O calendário é exibido com cabeçalho nodialog modo padrão.
    • O seletor permanece aberto ao digitar (em modo de duas entradas edropdown em modo de entrada).
    • A seleção de calendário é atualizada com o valor digitado.
    • A visualização do calendário é atualizada de acordo com o valor digitado.
    • O seletor exibe um ícone claro por padrão no modo de entrada única.
  • IgxPredefinedRangesAreaComponent
    • Adicionado um novo componente para renderizar os intervalos predefinidos ou personalizados dentro do calendário doIgxDateRangePicker
• IgxDatePicker
  • Semelhante ao oIgxDateRangePicker, também completa a possibilidade de personalizar o calendário ao introduzir as seguintes propriedades além das já existentes:
    • hideHeader
    • orientation
    • activeDate
  • Behavioral Changes
    • A seleção de calendário é atualizada com o valor digitado.
    • A exibição de calendário é atualizada de acordo com o valor de data digitado.
• IgxOverlay
  • As Configurações de Posição agora aceitam uma nova propriedade opcionaloffset de entrada do tiponumber. Usado para definir o deslocamento do elemento em relação ao alvo em pixels.
• IgxTooltip
  • A dica de tela agora permanece aberta enquanto interage com ela.
• IgxTooltipTarget
  • Introduziram várias novas propriedades para melhorar a personalização do conteúdo e comportamento das dicas de informação. Esses incluempositionSettings,hasArrow,sticky,closeButtonTemplate. Para uso detalhado e exemplos, consulte o Tooltip README.

Geral

• IgxDropDownAgora expõe umarole propriedade de entrada, permitindo que os usuários personalizem o atributo do papel com base no caso de uso. O padrão élistbox.
• IgxTooltipTarget
  • Behavioral Changes
    • AshowDelay propriedade de entrada agora é padrão para200.
    • AhideDelay propriedade de entrada agora é padrão para300.
    • OsshowTooltip métodos ehideTooltip não levamshowDelay em conta ouhideDelay não levam em conta.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
  • Sorting improvements
    • Eficiência aprimorada do algoritmo de classificação usando a transformação schwartziana. Essa é uma técnica, também conhecida como decorar-classificar-desdecorar, que evita recalcular as chaves de classificação associando-as temporariamente aos registros de dados originais.
    • Algoritmos de classificação refatorados de recursivos para iterativos.
  • Melhorias de agrupamento
    • Algoritmo de agrupamento refatorado de recursivo para iterativo.
    • Operações de agrupamento otimizadas.

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