What’s New: Ignite UI for Angular 19.2

Estamos encantados de anunciar que la actualización Ignite UI for Angular 19.2 ya está aquí, y prometemos que mejorará aún más la forma en que crea aplicaciones web. Incluye dos mejoras significativas:

• Ignite UI Angular Grid major update of SSR (Server Side Rendering) and SSG (Prerendering)
• Angular Tile Manager

No será un juego de búsqueda de huevos para comenzar a crear aplicaciones Angular ricas en funciones y de alto rendimiento. Solo tienes que correr: npm update igniteui-angular.

Exploremos las actualizaciones para ver qué puede hacer.

SSR (renderizado del lado del servidor) y SSG (prerenderizado) para Ignite UI for Angular cuadrícula

Ignite UI Angular Grid recibió una actualización importante de su SSR (Server Side Rendering) y SSG (Prerendering). En versiones anteriores, los usuarios podían experimentar varios efectos secundarios durante la hidratación, como el cambio de ancho de las columnas y los recipientes. Esto se debía a la virtualización, que requería que se calcularan los tamaños. Con Ignite UI for Angular 19.2, la cuadrícula ahora renderiza todos sus elementos internos con sus tamaños relativos apropiados, lo que permite una hidratación perfecta del cliente y el posterior enlace de datos. Con estas mejoras, los usuarios deberían tener una mejor experiencia, lo que permite el SEO y el SSG o SSR críticos para el rendimiento en Angular.

**NOTA:** Los datos solo se renderizan previamente si todos los tamaños de cuadrícula se establecen en píxeles.

Angular Componente Administrador de mosaicos

El componente Administrador de mosaicos permite la visualización de contenido en mosaicos individuales. Permite a los usuarios interactuar con estos mosaicos reorganizándolos y cambiando su tamaño, dándoles la libertad de personalizar el diseño y la apariencia del contenido según sus preferencias. Esta flexibilidad mejora la experiencia del usuario al permitir una forma más personalizada y eficiente de ver y administrar el contenido.

Ignite UI Tile Manager es un componente web estándar que se puede utilizar en una aplicación Angular. Ofrece dos componentes que podemos utilizar:

• IgcTileComponent– Este componente representa un mosaico individual que se muestra dentro del Administrador de mosaicos.
• IgcTileManagerComponent– Este es el componente principal que contiene todos los componentes de la baldosa, sirviendo como contenedor para todo el diseño de la baldosa.

Propiedades del Administrador de mosaicos

Columnas y filas

Como usuario, puede definir el número de columnas de cuadrícula para el Administrador de mosaicos. Para ello, basta con establecer la column-count propiedad en el número deseado de columnas.

Gap

La propiedad Gap define el espacio entre las baldosas. El valor de la gap propiedad debe ser un número seguido de una unidad de longitud (por ejemplo, px, rem, em, ...). Este valor se aplicará tanto al espacio horizontal (ancho) como al espacio vertical (alto) entre mosaicos.

Anchura y altura mínimas

Son propiedades para establecer el ancho mínimo de las columnas (min-column-width) y la altura mínima de las filas (min-row-height) en el Administrador de mosaicos. De forma similar a la propiedad gap, los valores de estas propiedades deben ser un número seguido de una unidad de longitud.

Resizing

El cambio de tamaño en el Administrador de mosaicos es una funcionalidad que permite cambiar el tamaño de los mosaicos mediante tres adornos de cambio de tamaño diferentes.

• Adorno lateral: Ajusta la anchura modificando el tramo de la columna.
• Adorno inferior: Ajusta la altura modificando el intervalo de la fila.
• Adorno de esquina: Ajusta la anchura y la altura simultáneamente.

Reorder

Puede reordenar los mosaicos en el Administrador de mosaicos mediante la función de arrastrar y soltar. De forma predeterminada, los mosaicos no se pueden arrastrar. Para habilitar esta funcionalidad, establezca la propiedad drag-mode en el Administrador de mosaicos en mosaico o encabezado de mosaico.

• Con la opción de mosaico, puede hacer clic y mantener presionado en cualquier lugar de un mosaico individual para comenzar a arrastrarlo.
• Con la opción de encabezado de mosaico, solo puede hacer clic y mantener presionada la sección de encabezado del mosaico para iniciar el proceso de arrastre.

Serialization

El Administrador de mosaicos de Web Components proporciona métodos que ayudan a administrar el diseño de los mosaicos:

• El método saveLayout le permite guardar la disposición actual de las baldosas en el Administrador de baldosas. Captura el orden, el tamaño y la posición actuales de todos los mosaicos para que pueda restaurarlos a esta configuración exacta más adelante.
• El método loadLayout permite cargar un diseño guardado previamente. Cuando se llama, restaura las baldosas a su estado exacto cuando se guardó el diseño, incluido su orden, tamaño y posición.

Styling

También puede personalizar la apariencia de los dos componentes: Administrador de mosaicos y mosaicos. El Administrador de mosaicos expone solo una propiedad CSS: base, que se puede usar para diseñar el contenedor base del Administrador de mosaicos. El componente Tile expone varias propiedades CSS que se pueden utilizar.

Es importante tener en cuenta que el componente Web Components mosaico tiene propiedades que se pueden establecer individualmente para cada mosaico. Algunas de estas propiedades incluyen:

• La col-span propiedad especifica el número de columnas que abarcará el mosaico en el diseño, lo que le permite controlar su tamaño horizontal.
• La row-span propiedad determina el número de filas que se extenderá verticalmente el mosaico, ajustando la altura del mosaico dentro del diseño.
• La col-start propiedad especifica la columna inicial donde se coloca el mosaico.
• La row-start propiedad especifica la fila inicial en la que se coloca el mosaico.
• La disable-fullscreen propiedad oculta el botón de acción de pantalla completa predeterminado.
• La disable-maximize propiedad oculta el botón de acción de alternancia de maximización predeterminado.
• La disable-resize propiedad impide que el usuario cambie el tamaño del icono.

Ignite UI for Angular 19.2.0 Changelog

Explora todos los detalles aquí.

General

• IgxCarousel
  • Se ha quitado la propiedad keyboardSupport en desuso.
• IgxSlide
  • Obsolescencia: tabIndex ha quedado obsoleta y se eliminará en una versión futura.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • El valor minWidth de una columna y maxWidth restringe lo especificado width por el usuario para que no pueda salir de sus límites.
  • En el modo SSR, la cuadrícula con altura 100% o sin altura se renderizará en el servidor con % de tamaño y sin datos. La cuadrícula mostrará la plantilla de cuadrícula vacía o el indicador de carga (si isLoading es verdadero).
  • En el modo SSR, la cuadrícula con ancho 100% o sin ancho se representará en el servidor con % de tamaño y con todas las columnas.
  • La pagingMode propiedad ahora se puede establecer como cadenas 'local' simples y 'remote' no requiere importar la GridPagingMode enumeración.
• IgxHierarchicalGrid
  • Se ha introducido una nueva capacidad de filtrado avanzada que permite que los registros de nivel superior se refinen dinámicamente en función de los atributos o datos de sus registros secundarios asociados.
  • Se agregó una nueva schema propiedad de entrada que se puede usar para pasar una colección de EntityType objetos. Esta propiedad es necesaria para escenarios de datos remotos.
• IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
  • Se ha agregado compatibilidad con entidades con estructura jerárquica.
• EntityType
  • Se ha introducido una nueva propiedad opcional llamada childEntities que se puede usar para crear entidades anidadas.

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