Ignite UI for Angular 20.1 ya está disponible! ¿Qué hay de nuevo y emocionante?

¿Luchando contra las complejidades de su código? Bueno, la versión Ignite UI for Angular 20.1 se trata de optimizar y facilitar sus flujos de trabajo y procesos de desarrollo. Nos hemos duplicado para hacer que la cuadrícula de Angular funcione mejor para usted con nuevas funciones y mejoras de rendimiento. Con potentes complementos como la fusión de celdas, que mejora la legibilidad al eliminar los valores duplicados, y la fijación de columnas de doble cara para una máxima flexibilidad y control, puede ofrecer visualizaciones de datos más limpias, conjuntos de datos optimizados y una experiencia de usuario más fluida. Concéntrese en la compilación, no en la depuración.

Aquí está todo lo nuevo de un vistazo.

Función de fusión de celdas de cuadrícula

Las cuadrículas de Ignite UI for Angular proporcionan una función de combinación de celdas que combina dos o más celdas adyacentes con el mismo valor en una sola celda más grande. La combinación se aplica verticalmente dentro de una columna y ayuda a mejorar la legibilidad al reducir los valores duplicados. La función se puede configurar para combinar celdas de forma predeterminada, coincidiendo con los valores de datos o aplicando una condición personalizada.

La función de combinación de celdas está disponible para:

Anclaje de columna de cuadrícula en ambos lados

Con Ignite UI for Angular 20.1, puede especificar cada ubicación de fijación de columnas por separado, lo que le permite anclar columnas a ambos lados de la cuadrícula para mayor comodidad, optimización más fácil de los conjuntos de datos y lograr la experiencia de usuario deseada para su aplicación Angular.

El anclaje de columnas en ambos lados está disponible para Angular cuadrícula de datos, Angular cuadrícula de árbol y Angular cuadrícula jerárquica.

Empujando los límites del rendimiento Angular en la red

En Infragistics, siempre nos hemos enorgullecido de ofrecer las parrillas de Angular más rápidas del mundo y ahora, estamos llevando el rendimiento al siguiente nivel. En los últimos sprints, nuestros equipos de desarrollo se han centrado en optimizar el núcleo de nuestra biblioteca de componentes Angular: cuadrícula de datos, cuadrícula de árbol y cuadrícula jerárquica.

Más rápido que nunca: la canalización de clasificación optimizada

La primera mejora significativa que se lanzará en Ignite UI for Angular 20.1 es una optimización integral de la canalización de clasificación. Sabemos que para las aplicaciones que manejan grandes conjuntos de datos, cada milisegundo cuenta. Nuestros criterios de aceptación iniciales eran ambiciosos: comparar el rendimiento de la agrupación y demostrar al menos una mejora del 25% en el tiempo de ejecución para conjuntos de datos con 10,000 filas o más.

¿Los resultados? Hemos superado ese punto de referencia, logrando:

• Clasificación de 3 a 4 veces más rápida para conjuntos de datos con 100.000 registros.
• El tiempo total de operación de datos se redujo en ~35% en cuadrículas, dentro del escenario de aplicación, con 100K filas.

Estas mejoras significan que sus aplicaciones se sentirán más receptivas y fluidas que nunca, incluso cuando se trata de cantidades masivas de datos. Este es un testimonio de la dedicación de nuestros desarrolladores a la mejora continua y su pasión por ofrecer la mejor experiencia de usuario posible.

Esta última optimización en Ignite UI for Angular 20.1 es una clara demostración de nuestra filosofía. Creemos en hacer un esfuerzo adicional para capacitar a los desarrolladores con herramientas que no solo son ricas en funciones, sino también increíblemente eficientes. Estamos entusiasmados de continuar este viaje de innovación y ver las increíbles aplicaciones que creará con el poder mejorado de Ignite UI for Angular.

Compatibilidad con Angular 20

Lanzado el 9 de junio, con Ignite UI for Angular 20.0.0.

Complete el CHANGELOG para Ignite UI for Angular 20.1.0

Nuevas características

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Se introdujo una nueva función de combinación de celdas que le permite configurar y combinar celdas en una columna basada en los mismos datos u otra condición personalizada, en una sola celda. Se puede habilitar en las columnas individuales:<igx-column field="field" [merge]="true"></igx-column>La combinación se puede configurar en el nivel de cuadrícula para aplicar:
    • onSort– solo cuando la columna está ordenada.
    • always– siempre, independientemente de las operaciones de datos.
    <igx-grid [cellMergeMode]="'always'"> </igx-grid> El valor predeterminadocellMergeMode esonSort. La funcionalidad puede modificarse estableciendo una configuración personalizadamergeStrategy en la cuadrícula, en caso de que se necesiten otras condiciones de fusión o lógica para un escenario personalizado. También es posible establecer amergeComparer en las columnas individuales, por si se necesita un manejo personalizado para un campo de datos concreto.
  • Se ha añadido la posibilidad de fijar columnas individuales a un lado específico (inicio o final de la cuadrícula), para que ahora puedas tener fijación desde ambos lados. Esto puede hacerse de forma declarativa estableciendo lapinningPosition propiedad en la columna:<igx-column [field]="'Col1′" [pinned]='true' [pinningPosition]='pinningPosition'> </igx-column>public pinningPosition = ColumnPinningPosition.End; O con la API, mediante parámetro opcional:grid.pinColumn('Col1', 0, ColumnPinningPosition.End); grid.pinColumn('Col2', 0, ColumnPinningPosition.Start); Si la propiedadpinningPosition no está establecida en una columna, la columna se colocará por defecto en la posición especificada en las opciones de lapinning cuadrícula.columns​
• IgxCarousel
  • Se añadióselect la sobrecarga de métodos aceptando índice.
  this.carousel.select(2, Direction.NEXT);
• IgxDateRangePicker
  • Ahora tiene un conjunto completo de propiedades para personalizar el calendario:
    • headerOrientation
    • orientation
    • hideHeader
    • activeDate
    • disabledDates
    • specialDates
  • Así como las siguientes plantillas, disponibles para personalizar el contenido del encabezado del calendario endialog modo:
    • igxCalendarHeader
    • igxCalendarHeaderTitle
    • igxCalendarSubheader
  • Se agregaron nuevas propiedades:
    • usePredefinedRanges– Si renderizar rangos predefinidos integrados
    • customRanges– Permite al usuario proporcionar rangos personalizados renderizados como chips
    • resourceStrings– Permite al usuario proporcionar un conjunto de cadenas de recursos
  • Behavioral Changes
    • Se agregó el botón de cancelación al cuadro de diálogo, lo que permite al usuario cancelar la selección.
    • El calendario se muestra con cabecera endialog modo por defecto.
    • El selector permanece abierto al escribir (en modo de dos entradasdropdown).
    • La selección de calendario se actualiza con el valor escrito.
    • La vista de calendario se actualiza según el valor escrito.
    • El selector muestra un icono claro de forma predeterminada en el modo de entrada única.
  • IgxPredefinedRangesAreaComponent
    • Se añadió un nuevo componente para renderizar los rangos predefinidos o personalizados dentro del calendario delIgxDateRangePicker
• IgxDatePicker
  • De forma similarIgxDateRangePicker, también se completa la posibilidad de personalizar el calendario introduciendo las siguientes propiedades además de las existentes:
    • hideHeader
    • orientation
    • activeDate
  • Behavioral Changes
    • La selección de calendario se actualiza con el valor escrito.
    • La vista de calendario se actualiza según el valor de fecha escrito.
• IgxOverlay
  • Los ajustes de posición ahora aceptan una nueva propiedad opcionaloffset de entrada, tiponumber tipo. Se usa para establecer el desplazamiento del elemento respecto al destino en píxeles.
• IgxTooltip
  • La descripción ahora permanece abierta mientras interactúas con ella.
• IgxTooltipTarget
  • Introdujo varias nuevas propiedades para mejorar la personalización del contenido y comportamiento de las descripciones emergentes. Entre ellos se incluyenpositionSettings,hasArrow,sticky,closeButtonTemplate. Para un uso detallado y ejemplos, consulte el Tooltip README.

General

• IgxDropDownahora expone unarole propiedad de entrada, permitiendo a los usuarios personalizar el atributo del rol según el caso de uso. El predeterminado eslistbox.
• IgxTooltipTarget
  • Behavioral Changes
    • LashowDelay propiedad de entrada ahora es predeterminada a200.
    • LahideDelay propiedad de entrada ahora es predeterminada a300.
    • LosshowTooltip métodos yhideTooltip no loshowDelay tienen en cuenta.hideDelay​
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
  • Sorting improvements
    • Eficiencia mejorada del algoritmo de clasificación mediante la transformación de Schwartz. Esta es una técnica, también conocida como decorar-ordenar-desdecorar, que evita volver a calcular las claves de ordenación asociándolas temporalmente con los registros de datos originales.
    • Algoritmos de ordenación refactorizados de recursivo a iterativo.
  • Mejoras de Groupby
    • Algoritmo de agrupación refactorizado de recursivo a iterativo.
    • Operaciones de agrupación optimizadas.

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