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:

• La expresión entra en modo edición con un solo clic,Enter oSpace.
• 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.

Permite la creación de consultas anidadas usandoIN and NOT IN operadores

Seleccionar losIN operadores de comparaciónNOT IN de or te permite crear subconsultas SQL. Son una herramienta poderosa que te permite realizar consultas más complejas integrando una consulta dentro de otra. Esto ahora se puede lograr mediante la interfaz de Query Builder.

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
  • Cambios de comportamiento: lamaximumIndicatorsCount propiedad de entrada ahora se10 aplica por defecto.
  • Depreciación–CarouselIndicatorsOrientationMiembros de ENUMtop ybottom han sido descontinuados y serán eliminados en una versión futura. Usostart yend en lugar de.

Nuevas características

• IgxBanner
  • Se introdujo una nuevaexpanded propiedad de entrada, que permite el control dinámico sobre el estado del banner. Ahora el banner puede configurarse programáticamente como "expandido" (visible) o "colapsado" (oculto) tanto inicialmente como en tiempo de ejecución. Las animaciones se activarán durante las actualizaciones en tiempo de ejecución: la animación de apertura se reproduce cuandoexpanded está configurada entrue y la de cierre se reproduce cuando está configurada en .false Sin embargo, no se activará ninguna animación cuando la propiedad esté establecida inicialmente.
  • El ciclo de vida del evento del banner (opening,opened,closing,)closed solo se activa mediante interacciones del usuario (por ejemplo, al hacer clic para abrir/cerrar). Las actualizaciones programáticas que utilicen laexpanded propiedad no activarán ningún evento.
  • Si laexpanded propiedad cambia durante una animación en curso, la animación actual se detendrá y la animación opuesta comenzará desde donde terminó la anterior. Por ejemplo, si la animación de apertura (10 segundos) se interrumpe a los 6 segundos yexpanded se configura parafalse, la animación de cierre (5 segundos) comenzará desde su tercer segundo.
• IgxQueryBuildertiene un nuevo diseño que viene con una apariencia actualizada y nuevas funcionalidades
  • IgxQueryBuilderComponent
    • Se introdujo la capacidad de crear consultas anidadas especificando operadores IN/NOT IN.
    • Se introdujo la capacidad de reposicionar chips de condición arrastrándolos o usándolosArrow Up/Down.
    • Se añadió laentities propiedad que acepta un array deEntityType objetos que describen una entidad con su nombre y un array de campos. Lafields propiedad de entrada ha sido obsoleta y será eliminada en una versión futura. Las migraciones automáticas están disponibles y se aplicarán enng update ellas.
    • Se añadiódisableEntityChange una propiedad que puede desactivar la entidad seleccionada a nivel raíz tras la selección inicial. Por defectofalse.
    • Propiedad añadidadisableReturnFieldsChange que puede usarse para desactivar la combinación de campos a nivel raíz. Por defectofalse.
    • Se añadieron loscanCommit​commit métodos públicosdiscard, permitiendo al usuario guardar/descartar el estado actual del árbol de expresión.
    • Opción añadida para plantillar la entrada de valor de búsqueda:<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
    • La expresión entra en modo edición con un solo clic,Enter oSpace.
    • Ya no se permite seleccionar condiciones dentro delIgxQueryBuilderComponent lugar. La agrupación/desagrupación de expresiones ahora se logra mediante la funcionalidad de arrastrar y soltar recién expuesta.
    • Ya no se admite la eliminación de varias expresiones a través del menú contextual.
  • IgxQueryBuilderHeaderComponent
    • Behavioral Change
    • Legend is no longer shown.
    • Si latitle propiedad de entrada no está activada, por defecto sería cadena vacía.
    • Deprecation
    • LasshowLegend propiedades de entrada yresourceStrings han sido obsoletas y serán eliminadas en una versión futura. Las migraciones automáticas están disponibles y se aplicarán enng update ellas.
• IFilteringExpression
  • Se ha introducido una nueva propiedad opcional llamadaconditionName Esto generalmente sería igual a lo existentecondition.name.
• IFilteringOperation
  • Se ha introducido una nueva propiedad opcional llamadaisNestedQuery Se utiliza para indicar si la condición conduce a la creación de una consulta anidada.

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