¡ Ignite UI for Angular 21.0 ha salido! Lo nuevo y emocionante

A medida que los desarrolladores buscan aprovechar las últimas innovaciones Angular, contar con herramientas que se adapten a la evolución del framework se vuelve esencial. Para alinear Ignite UI for Angular 21 con todo lo nuevo, hemos lanzado funciones y mejoras emocionantes.

Con este lanzamiento, Ignite UI for Angular no solo añade soporte completo para Angular 21, sino que también introduce mejoras significativas en el rendimiento del filtrado de cuadrícula, un nuevo Grid PDF Exporter y un componente AI Chat.

Un anuncio más relacionado con Ignite UI for Angular, como parte de nuestro conjunto de herramientas de UI, estamos empoderando a la comunidad de código abierto proporcionando un conjunto de 50+ componentes de código abierto bajo la licencia MIT en Angular, React, Blazor y Web Components. Esta es una gran expansión de nuestra misión: empoderar a cada desarrollador, en cualquier lugar, con herramientas modernas, llenas de funciones y preparadas para el futuro para crear aplicaciones web de alto rendimiento para cualquier escenario. Puedes encontrar todos los detalles en el blog "Ignite UI Releases 50+ Potentes Componentes de Código Abierto".

Vamos a explorar todo en detalle.

Rendimiento de filtrado optimizado: Estableciendo un nuevo estándar

Components: Angular Data Grid, Angular Tree Grid, Angular Hierarchical Grid, Angular Pivot Grid

En Infragistics, el rendimiento no es solo un objetivo, es una promesa. Tras ofrecer optimizaciones de ordenación notables en Ignite UI for Angular 20.1, hemos centrado nuestra atención en el rendimiento del filtrado. Para aplicaciones que gestionan enormes conjuntos de datos, la velocidad de filtrado es crítica, y hemos vuelto a elevar el listón.

En los últimos ciclos de desarrollo, nuestros equipos se centraron en el filtrado al estilo Excel entre cuadrículas, apuntando a escenarios con 100.000+ registros. Los resultados hablan por sí mismos:

Opening Filter Dialog

• Columna numérica: Más de 3 veces más rápido
• Columna de cadenas: Más de 4 veces más rápido
• Columna ID (todas únicas): mejora incremental pero significativa (~11% más rápido)

Applying Filter

• Columna numérica: Más de 9 veces más rápido
• Columna de cadenas: Más de 5 veces más rápido
• ID column: More than 9x faster

Estas mejoras aseguran que incluso las aplicaciones empresariales más exigentes experimenten filtrado ultrarrápido, ofreciendo una experiencia de usuario más fluida y ágil.

Y no nos quedamos aquí: estad atentos a las próximas mejoras que redefinirán los estándares de rendimiento de todas Ignite UI Grids.

Grid PDF Exporter

El servicio Ignite UI for Angular PDF Exporter ofrece una funcionalidad potente para exportar datos en formato PDF desde diversas fuentes, incluyendo matrices de datos en bruto y componentes avanzados de la cuadrícula como IgxGrid, IgxTreeGrid, IgxHierarchicalGrid e IgxPivotGrid. La funcionalidad de exportación está incluida en laIgxPdfExporterService clase, que permite una exportación de datos fluida a formato PDF con funciones completas como soporte para documentos de varias páginas, saltos automáticos de página y opciones de formato personalizables.

Características principales:

Documentation for Ignite UI for Angular PDF Exporter service.

Angular AI Chat Component

El componente Ignite UI Chat ofrece una solución completa para construir interfaces conversacionales en tus aplicaciones. Ya sea que estés creando una herramienta de atención al cliente, un espacio de trabajo colaborativo o un asistente de chatbot, el componente de Chat te proporciona los bloques básicos que necesitas: enviar y recibir mensajes de texto, subir archivos adjuntos, mostrar respuestas rápidas a sugerencias y mostrar indicadores de escritura cuando el otro participante escribe una respuesta.

A diferencia de una lista de mensajes estática, elChat componente es interactivo y está diseñado para la comunicación en tiempo real. Gestiona la entrada, el renderizado y la interacción del usuario, dándote control total sobre cómo se muestran los mensajes y los archivos adjuntos. También expone una extensa API de renderizado que te permite anular cualquier parte de su diseño o gráficos.

Documentación para Ignite UI for Angular componente de chat.

Soporte de Múltiples Puntos de Entrada

La biblioteca Ignite UI for Angular ahora soporta múltiples puntos de entrada para mejorar el balanceo del árbol y la división de código. Aunque el punto de entrada principal 'igniteui-angular' sigue siendo totalmente compatible hacia atrás reexportando todos los puntos de entrada granulares, recomendamos migrar a los nuevos puntos de entrada para obtener tamaños óptimos de bundles.

Benefits:

• Mejor sacudencia del árbol: los componentes no utilizados no se agruparán
• División de código: cada componente puede cargarse por separado de forma lenta
• Tamaños de paquetes más pequeños: importa solo lo que necesites
• Mejora en el rendimiento de la construcción

Documentación para Ignite UI for Angular división de código y múltiples puntos de entrada.

Registro completo de cambios para Ignite UI for Angular 21.0

Temas

• IgxButton
  • Breaking Change
    • Los siguientes parámetros relacionados con sombras fueron eliminados de youtlined-button-theme​flat-button-theme:
      • resting-shadow
      • hover-shadow
      • focus-shadow
      • active-shadow

Nuevas características

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Se añadió funcionalidad de exportación de PDF a los componentes de la cuadrícula. Las cuadrículas ahora pueden exportarse a formato PDF junto con las opciones existentes de exportación de Excel y CSV.

El nuevoIgxPdfExporterService sigue el mismo patrón que los exportadores de Excel y CSV:

import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular';

constructor(private pdfExporter: IgxPdfExporterService) {}

exportToPdf() {
    const options = new IgxPdfExporterOptions('MyGridExport');
    options.pageOrientation = 'landscape'; // 'portrait' or 'landscape' (default: 'landscape')
    options.pageSize = 'a4'; // 'a3', 'a4', 'a5', 'letter', 'legal', etc.
    options.fontSize = 10;
    options.showTableBorders = true;
    
    this.pdfExporter.export(this.grid, options);
}

El componente exportador de la barra de herramientas de cuadrícula ahora incluye un botón de exportación PDF:

<igx-grid-toolbar>
    <igx-grid-toolbar-exporter 
        [exportPDF]="true" 
        [exportExcel]="true" 
        [exportCSV]="true">
    </igx-grid-toolbar-exporter>
</igx-grid-toolbar>

Cambios importantes

Refactor de Inyección de Dependencias

• Ahora toda la DI interna usa lainject() API acrossigniteui-angular (ya no hay DI constructor en el código de la biblioteca).
• Si amplías nuestros componentes/servicios o llamas directamente a sus constructores, elimina parámetros DI y cambia ainject() (por ejemplo, ).protected foo = inject(FooService);​
• El uso de aplicaciones mediante plantillas se mantiene igual; No se necesita acción a menos que subclasices o anules nuestros tipos.

Soporte de Múltiples Puntos de Entrada

La biblioteca ahora soporta múltiples puntos de entrada para mejorar el tree-shaking y la división de código. Aunque el punto de entrada principal (igniteui-angular) sigue siendo totalmente compatible hacia atrás al reexportar todos los puntos de entrada granulares, recomendamos migrar a los nuevos puntos de entrada para tamaños óptimos de bundles.

Puntos de entrada:

• igniteui-angular/core– Servicios y tipos de base centrales
• igniteui-angular/directives– Directrices comunes
• Puntos de entrada específicos de componentes:igniteui-angular/grids,igniteui-angular/input-group,igniteui-angular/drop-down, etc.
• Puntos de entrada específicos de la cuadrícula para importaciones que se pueden cambiar en árbol:
  • igniteui-angular/grids/core– Infraestructura compartida de cuadrícula (columnas, barra de herramientas, filtrado, ordenación, etc.)
  • igniteui-angular/grids/grid– Componente de cuadrícula estándar (IgxGridComponent)
  • igniteui-angular/grids/tree-grid– Componente de la cuadrícula en árbol (IgxTreeGridComponent)
  • igniteui-angular/grids/hierarchical-grid– Componente de la cuadrícula jerárquica (IgxHierarchicalGridComponent,IgxRowIslandComponent)
  • igniteui-angular/grids/pivot-grid – Pivot grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

Migración: Lang update migración te pedirá que migres opcionalmente tus importaciones a los nuevos puntos de entrada. Si decides no migrar, puedes seguir usando el punto de entrada principal con total compatibilidad hacia atrás.

Para migrar manualmente más adelante:

ng update igniteui-angular ---migrate-only --from=20.1.0 --to=21.0.0

Reubicaciones de componentes:

• Input directives (IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective) → igniteui-angular/input-group
• IgxAutocompleteDirective → igniteui-angular/drop-down
• IgxRadioGroupDirective → igniteui-angular/radio

Renombramiento de tipos (para evitar conflictos):

• Direction → CarouselAnimationDirection (in carousel)

Benefits:

• Mejor sacudencia del árbol: los componentes no utilizados no se agruparán
• División de código: cada componente puede cargarse por separado de forma lenta
• Tamaños de paquetes más pequeños: importa solo lo que necesites
• Mejora en el rendimiento de la construcción

Consulta la documentación del formato de Angular Package para más detalles sobre los puntos de entrada.

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