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

It will not be an egg hunt game to start creating feature-rich and high-performance Angular applications. You just need to run: 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 – This component represents an individual tile displayed within the Tile Manager.
• IgcTileManagerComponent – This is the main component that contains all of the tile components, serving as the container for the entire tile layout.

Propriedades do Gerenciador de Blocos

Colunas e linhas

As a user, you can define the number of grid columns for the Tile Manager. To do this, simply set the column-count property to the desired number of columns.

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
  • Removed deprecated property keyboardSupport.
• IgxSlide
  • Deprecation – tabIndex has been deprecated and will be removed in a future version.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • A column’s minWidth and maxWidth constrain the user-specified width so that it cannot go outside their bounds.
  • 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.
  • The pagingMode property can now be set as simple strings 'local' and 'remote' and does not require importing the GridPagingMode 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.
  • Added a new schema input property that can be used to pass collection of EntityType objects. This property is required for remote data scenarios.
• IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
  • Adicionado suporte para entidades com estrutura hierárquica.
• EntityType
  • A new optional property called childEntities has been introduced that can be used to create nested entities.

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