What’s New: Ignite UI for Angular 19.1

Tras el lanzamiento de Ignite UI for Angular 19.0 en noviembre de 2024, que venía con compatibilidad con Angular 19 y una función de resumen de cuadrícula mejorada, es hora de Ignite UI for Angular 19.1. Viene con nuevos diseños y nuevas y potentes capacidades:

• Query Builder: nuevo diseño, compatibilidad con consultas multitabla, consultas anidadas y mucho más.
• Carrusel: diseño actualizado y soporte de orientación vertical.

Veamos cada tema con más detalle.

Actualización del componente del Generador de consultas

Angular componente Query Builder ha estado disponible durante algún tiempo y proporciona una interfaz de usuario enriquecida que permite a los desarrolladores crear consultas de filtrado de datos complejas para un conjunto de datos especificado. Ha recibido un nuevo diseño fantástico y varias características nuevas y potentes.

Primero, sobre el diseño y los cambios de comportamiento

Full list of behavioral changes:

• Expression enters edit mode on a single click, Enter or Space.
• Ya no se admite la selección de condiciones dentro del componente Query Builder.
• La agrupación/desagrupación de expresiones ahora se logra a través de la funcionalidad de arrastrar y soltar recién expuesta o los usuarios pueden reposicionar los chips de condición usando las teclas de flecha arriba/abajo.
• Ya no se admite la eliminación de varias expresiones a través del menú contextual.
• Se elimina la leyenda.
• Si la entrada del título no está establecida, será una cadena vacía de forma predeterminada.

A continuación, sobre las nuevas funciones

El Generador de consultas de Angular ahora admite la compatibilidad con consultas de varias tablas

Imagine un escenario en el que tiene una aplicación de comercio electrónico con tablas separadas para Pedidos, Clientes y Productos. Una consulta de varias tablas puede combinar datos de estas tablas para mostrar una vista detallada de cada pedido, incluidos los detalles del cliente y la información del producto, todo dentro de un componente de cuadrícula. Dependiendo del escenario específico, el usuario podría mejorarlo sobre la marcha. Esto mejora la experiencia del usuario al proporcionar una visión holística sin necesidad de navegar entre diferentes secciones de la aplicación.

En este sentido, el componente Angular Query Builder permite crear visualmente consultas complejas. El componente permite a los usuarios seleccionar campos de diferentes tablas, definir relaciones y establecer condiciones. A continuación, la consulta resultante se puede ejecutar para capturar los datos combinados, que se pueden enlazar a Ignite UI Angular componente Grid para su visualización. Este enfoque simplifica el proceso de trabajo con datos relacionales y lo hace más accesible para los usuarios que pueden no estar familiarizados con la escritura 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.

Una nueva opción para crear una plantilla de la entrada de valor de búsqueda del Generador 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> 

Salida serializable

Por último, el objeto de salida podría serializarse en JSON. Estas mejoras hacen que el Angular Query Builder sea más versátil y fácil de usar que nunca.

Actualización del componente de carrusel

Ahora, el componente Carrusel de Angular admite la orientación vertical de los botones de navegación.

Ignite UI for Angular 19.1.0 Changelog

Explora todos los detalles aquí.

General

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

Nuevas características

• 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
    • Se introdujo la capacidad de crear consultas anidadas 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.
    • Ya no se admite la eliminación de varias expresiones a través del menú contextual.
  • 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 terminar...

Diseñada a la perfección para la compatibilidad, Ignite UI for Angular es la biblioteca que le permite aprovechar el poder de las últimas tecnologías y los principales lanzamientos. Comprometidos a proporcionarle el mejor conjunto de herramientas de interfaz de usuario Angular y conocimientos relacionados, nuestro objetivo es equiparlo con más conocimientos, nuevas funciones, rendimiento mejorado y estabilidad mejorada. Algunas de las mejoras se agregaron gracias a las solicitudes de usuarios como tú a través de nuestro repositorio de GitHub Ignite UI for Angular. Con esto en mente, siempre estamos abiertos a sugerencias y comentarios, ya que nos hacen crecer y responder mejor a sus necesidades de desarrollo.

Si necesitas más detalles, te animamos a que consultes nuestro:

• Canal de discordia
• Discusiones de GitHub
• Mapa vial
• Canal de YouTube
• Twitter