What’s New: Ignite UI for Angular 19.2

Temos o prazer de anunciar que a atualização Ignite UI for Angular 19.2 está aqui e prometemos que melhorará ainda mais a forma como você cria aplicativos da web! Ele inclui duas melhorias significativas:

• Ignite UI Angular Grid major update of SSR (Server Side Rendering) and SSG (Prerendering)
• Angular Tile Manager

Não será um jogo de caça aos ovos para começar a criar aplicativos Angular ricos em recursos e de alto desempenho. Você só precisa executar: npm update igniteui-angular.

Vamos explorar as atualizações para ver o que você pode fazer.

SSR (Renderização do Lado do Servidor) e SSG (Pré-renderização) para Ignite UI for Angular Grid

Ignite UI Angular Grid recebeu uma grande atualização em seu SSR (Server Side Rendering) e SSG (Prerendering). Nas versões anteriores, os usuários podiam experimentar vários efeitos colaterais durante a hidratação, como colunas e recipientes mudando de largura. Isso ocorreu por causa da virtualização, que exigia que os tamanhos fossem calculados. Com o Ignite UI for Angular 19.2, a grade agora renderiza todos os seus elementos internos com seus tamanhos relativos apropriados, permitindo a hidratação perfeita do cliente e a subsequente vinculação de dados. Com essas melhorias, os usuários devem ter uma experiência melhor, habilitando SEO e SSG ou SSR crítico para o desempenho em Angular.

**NOTA:** Os dados só serão pré-renderizados se todos os tamanhos de grade estiverem definidos em pixels.

Angular Componente Gerenciador de Blocos

O componente Gerenciador de blocos permite a exibição de conteúdo em blocos individuais. Ele permite que os usuários interajam com esses blocos reorganizando-os e redimensionando-os, dando-lhes a liberdade de personalizar o layout e a aparência do conteúdo de acordo com suas preferências. Essa flexibilidade aprimora a experiência do usuário, permitindo uma maneira mais personalizada e eficiente de visualizar e gerenciar conteúdo.

Ignite UI Tile Manager é um componente da Web padrão que pode ser usado em um aplicativo Angular. Ele oferece dois componentes que podemos usar:

• IgcTileComponent– Este componente representa um bloco individual exibido no Gerenciador de blocos.
• IgcTileManagerComponent– Este é o componente principal que contém todos os componentes do ladrilho, servindo como contêiner para todo o layout do ladrilho.

Propriedades do Gerenciador de Blocos

Colunas e linhas

Como usuário, você pode definir o número de colunas de grade para o Gerenciador de Blocos. Para fazer isso, basta definir a column-count propriedade para o número desejado de colunas.

Gap

A propriedade Gap define o espaço entre os blocos. O valor da propriedade deve ser um número seguido por uma unidade de gap comprimento (por exemplo, px, rem, em, ...). Esse valor será aplicado à folga horizontal (largura) e à folga vertical (altura) entre os ladrilhos.

Largura e altura mínimas

São propriedades para definir a largura mínima das colunas (min-column-width) e a altura mínima das linhas (min-row-height) no Gerenciador de Blocos. Semelhante à propriedade gap, os valores dessas propriedades devem ser um número seguido por uma unidade de comprimento.

Resizing

O redimensionamento no Gerenciador de blocos é uma funcionalidade que permite que os blocos sejam redimensionados usando três adornos de redimensionamento diferentes.

• Adorador lateral: Ajusta a largura modificando o vão da coluna.
• Adorador inferior: Ajusta a altura modificando a extensão da linha.
• Adorador de canto: Ajusta a largura e a altura simultaneamente.

Reorder

Você pode reordenar os blocos no Gerenciador de blocos usando o recurso de arrastar e soltar. Por padrão, os blocos não podem ser arrastados. Para habilitar essa funcionalidade, defina a propriedade drag-mode no Gerenciador de Blocos como bloco ou cabeçalho de bloco.

• Com a opção de bloco, você pode clicar e segurar em qualquer lugar em um bloco individual para começar a arrastá-lo.
• Com a opção de cabeçalho do bloco, você só pode clicar e segurar na seção de cabeçalho do bloco para iniciar o processo de arrastar.

Serialization

O Web Components Gerenciador de Blocos fornece métodos que ajudam a gerenciar o layout dos blocos:

• O método saveLayout permite que você salve a disposição atual dos blocos no Gerenciador de Blocos. Ele captura a ordem, o tamanho e a posição atuais de todos os blocos para que você possa restaurá-los para essa configuração exata posteriormente.
• O método loadLayout permite carregar um layout salvo anteriormente. Quando chamado, ele restaura os blocos para seu estado exato quando o layout foi salvo, incluindo sua ordem, tamanho e posição.

Styling

Você também pode personalizar a aparência dos dois componentes – Tile Manager e Tile. O Gerenciador de blocos expõe apenas uma propriedade CSS – base, que pode ser usada para estilizar o wrapper base do Gerenciador de blocos. O componente Tile expõe várias propriedades CSS que você pode usar.

É importante observar que o componente Bloco Web Components tem propriedades que podem ser definidas individualmente para cada bloco. Algumas dessas propriedades incluem:

• A col-span propriedade especifica quantas colunas o bloco se estenderá no layout, permitindo que você controle seu tamanho horizontal.
• A row-span propriedade determina quantas linhas o bloco se estenderá verticalmente, ajustando a altura do bloco dentro do layout.
• A col-start propriedade especifica a coluna inicial onde o bloco é colocado.
• A row-start propriedade especifica a linha inicial em que o bloco é colocado.
• A disable-fullscreen propriedade oculta o botão de ação de tela inteira padrão.
• A disable-maximize propriedade oculta o botão de ação de alternância maximizar padrão.
• A disable-resize propriedade impede que o bloco seja redimensionado pelo usuário.

Ignite UI for Angular 19.2.0 Changelog

Explore todos os detalhes aqui.

Geral

• IgxCarousel
  • Removida a propriedade keyboardSupport preterida.
• IgxSlide
  • Substituição–tabIndex foi descontinuada e será removida em uma versão futura.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • Uma coluna minWidth e maxWidth restringir o especificado pelo usuário width para que ele não possa sair de seus limites.
  • No modo SSR, a grade com altura de 100% ou sem altura será renderizada no servidor com % de tamanho e sem dados. A grade mostrará o modelo de grade vazio ou o indicador de carregamento (se isLoading for true).
  • No modo SSR, a grade com largura de 100% ou sem largura será renderizada no servidor com % de tamanho e com todas as colunas.
  • A pagingMode propriedade agora pode ser definida como strings 'local' simples e 'remote' não requer a importação da GridPagingMode enumeração.
• IgxHierarchicalGrid
  • Introduziu um novo recurso de filtragem avançada que permite que os registros de nível superior sejam refinados dinamicamente com base nos atributos ou dados de seus registros filho associados.
  • Adicionada uma nova schema propriedade de entrada que pode ser usada para passar uma coleção de EntityType objetos. Essa propriedade é necessária para cenários de dados remotos.
• IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
  • Adicionado suporte para entidades com estrutura hierárquica.
• EntityType
  • Uma nova propriedade opcional chamada childEntities foi introduzida que pode ser usada para criar entidades aninhadas.

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