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 começar a criar aplicações Angular ricas em recursos e de alto desempenho. Você só precisa correr: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 uma peça individual exibida dentro do Gerenciador de Blocos.
• IgcTileManagerComponent– Este é o componente principal que contém todos os componentes do tile, servindo como o recipiente para todo o layout do tile.

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 Tiles. Para isso, basta definir acolumn-count propriedade para o número desejado de colunas.

Gap

A propriedade Gap define o espaço entre os tiles. O valor dagap propriedade deve ser um número seguido por uma unidade de comprimento (por exemplo, px, rem, em, ...). Esse valor se aplicará tanto ao espaço horizontal (largura) quanto ao espaço vertical (altura) entre os azulejos.

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 Tiles. Semelhante à propriedade do intervalo, 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:

• Acol-span propriedade especifica quantas colunas o tile terá no layout, permitindo que você controle seu tamanho horizontal.
• Arow-span propriedade determina quantas linhas o bloco irá se estender verticalmente, ajustando a altura do bloco dentro do layout.
• Acol-start propriedade especifica a coluna inicial onde o bloco está posicionado.
• Arow-start propriedade especifica a linha inicial onde a peça está posicionada.
• Adisable-fullscreen propriedade esconde o botão padrão de ação em tela cheia.
• Adisable-maximize propriedade esconde o botão padrão de ativar a ação de maximizar.
• Adisable-resize propriedade impede que o tile seja redimensionado pelo usuário.

Ignite UI for Angular 19.2.0 Changelog

Explore todos os detalhes aqui.

Geral

• IgxCarousel
  • Removi propriedadeskeyboardSupport obsoletas.
• IgxSlide
  • Depreciação–tabIndexfoi descontinuada e será removida em uma versão futura.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • UmaminWidth coluna emaxWidth restringem o usuário especificadowidth para que ele não possa sair dos 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.
  • ApagingMode propriedade agora pode ser definida como strings'local' simples e'remote' não requer importar oGridPagingMode enum.
• 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 novaschema propriedade de entrada que pode ser usada para passar a coleção deEntityType 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 chamadachildEntities foi introduzida e 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