What’s New: Ignite UI for Angular 19.1

Após o lançamento do Ignite UI for Angular 19.0 em novembro de 2024, que veio com compatibilidade com o Angular 19 e um recurso aprimorado de resumo da grade, é hora do Ignite UI for Angular 19.1. Ele vem com ótimos novos designs e novos recursos poderosos:

• Query Builder – novo design, suporte a consultas em várias tabelas, consultas aninhadas e muito mais.
• Carrossel – design atualizado e suporte de orientação vertical.

Vejamos cada tema com mais detalhes.

Atualização do componente Construtor de consultas

Angular componente Construtor de Consultas foi lançado há algum tempo e fornece uma interface do usuário avançada que permite aos desenvolvedores criar consultas complexas de filtragem de dados para um conjunto de dados especificado. Ele recebeu um novo design fantástico e vários novos recursos poderosos.

Primeiro, sobre o design e as mudanças comportamentais

Full list of behavioral changes:

• Expression enters edit mode on a single click, Enter or Space.
• A seleção de condições dentro do componente Construtor de consultas não é mais suportada.
• O agrupamento/desagrupamento de expressões agora é obtido por meio da funcionalidade de arrastar e soltar recém-exposta ou os usuários podem reposicionar os chips de condição usando as teclas de seta para cima/para baixo.
• A exclusão de várias expressões por meio do menu de contexto não é mais suportada.
• A legenda foi removida.
• Se a entrada do título não estiver definida, será uma string vazia por padrão.

A seguir, sobre os novos recursos

O Angular Query Builder agora oferece suporte a consultas em várias tabelas

Imagine um cenário em que você tem um aplicativo de comércio eletrônico com tabelas separadas para Pedidos, Clientes e Produtos. Uma consulta de várias tabelas pode combinar dados dessas tabelas para mostrar uma visão detalhada de cada pedido, incluindo detalhes do cliente e informações do produto, tudo em um componente de grade. Dependendo do cenário específico, ele pode ser aprimorado pelo usuário em tempo real. Isso melhora a experiência do usuário, fornecendo uma visão holística sem a necessidade de navegar entre diferentes seções do aplicativo.

Nesse sentido, o componente Construtor de Consultas do Angular permite que você crie essas consultas complexas visualmente. O componente permite que os usuários selecionem campos de diferentes tabelas, definam relacionamentos e definam condições. A consulta resultante pode então ser executada para buscar os dados combinados, que podem ser vinculados a Ignite UI Angular componente Grid para exibição. Essa abordagem simplifica o processo de trabalho com dados relacionais e o torna mais acessível para usuários que podem não estar familiarizados com a escrita de consultas SQL.

Allows for the creation of nested queries using IN and NOT IN operators

Selecting the IN or NOT IN comparison operators enables you to create SQL subqueries. They are a powerful tool that allows you to perform more complex queries by embedding one query within another. This can now be achieved through the Query Builder UI.

Uma nova opção para modelar a entrada do valor de pesquisa do Construtor de Consultas angular

<ng-template igxQueryBuilderSearchValue 
            let-searchValue
            let-selectedField = "selectedField" 
            let-selectedCondition = "selectedCondition"
            let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
    @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
        <input type="text" required [(ngModel)]="searchValue.value"/>
    } @else {  
        <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
    }
</ng-template> 

Saída serializável

Por fim, o objeto de saída pode ser serializado para JSON. Esses aprimoramentos tornam o Angular Query Builder mais versátil e fácil de usar do que nunca.

Atualização do componente carrossel

Agora, o componente Carrossel Angular suporta a orientação vertical dos botões de navegação.

Ignite UI for Angular 19.1.0 Changelog

Explore todos os detalhes aqui.

Geral

• IgxCarousel
  • Behavioral Changes – the maximumIndicatorsCount input property now defaults to 10.
  • Deprecation – CarouselIndicatorsOrientation enum members top and bottom have been deprecated and will be removed in a future version. Use start and end instead.

Novos recursos

• IgxBanner
  • Introduced a new expanded input property, enabling dynamic control over the banner’s state. The banner can now be programmatically set to “expanded” (visible) or “collapsed” (hidden) both initially and at runtime. Animations will trigger during runtime updates — the open animation plays when expanded is set to true, and the close animation plays when set to false. However, no animations will trigger when the property is set initially.
  • The banner’s event lifecycle (opening, opened, closing, closed) only triggers through user interactions (e.g., clicking to open/close). Programmatic updates using the expanded property will not fire any events.
  • If the expanded property changes during an ongoing animation, the current animation will stop, and the opposite animation will begin from where the previous animation left off. For instance, if the open animation (10 seconds) is interrupted at 6 seconds and expanded is set to false, the close animation (5 seconds) will start from its 3rd second.
• IgxQueryBuilder has a new design that comes with an updated appearance and new functionality
  • IgxQueryBuilderComponent
    • Introduzida a capacidade de criar consultas aninhadas especificando operadores IN/NOT IN.
    • Introduced the ability to reposition condition chips by dragging or using Arrow Up/Down.
    • Added the entities property that accepts an array of EntityType objects describing an entity with its name and an array of fields. The fields input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
    • Added disableEntityChange property that can disable the entity selected on a root level after the initial selection. Defaults to false.
    • Added disableReturnFieldsChange property that can be used to disable the fields combo on a root level. Defaults to false.
    • Added the canCommit, commit and discard public methods, allowing the user to save/discard the current state of the expression tree.
    • Added option to template the search value input:<ng-template igxQueryBuilderSearchValue let-searchValue let-selectedField = "selectedField" let-selectedCondition = "selectedCondition" let-defaultSearchValueTemplate = "defaultSearchValueTemplate"> @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){ <input type="text" required [(ngModel)]="searchValue.value"/> } @else { <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ ng-container> } </ng-template>
    • Behavioral Changes
    • Expression enters edit mode on a single click, Enter or Space.
    • Selecting conditions inside the IgxQueryBuilderComponent is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
    • A exclusão de várias expressões por meio do menu de contexto não é mais suportada.
  • IgxQueryBuilderHeaderComponent
    • Behavioral Change
    • Legend is no longer shown.
    • If the title input property is not set, by default it would be empty string.
    • Deprecation
    • The showLegend and resourceStrings input properties have been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
• IFilteringExpression
  • A new optional property called conditionName has been introduced. This would generally be equal to the existing condition.name.
• IFilteringOperation
  • A new optional property called isNestedQuery has been introduced. It’s used to indicate whether the condition leads to a nested query creation.

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