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

It will not be an egg hunt game to start creating feature-rich and high-performance Angular applications. You just need to run: 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 – This component represents an individual tile displayed within the Tile Manager.
• IgcTileManagerComponent – This is the main component that contains all of the tile components, serving as the container for the entire tile layout.

Propiedades del Administrador de mosaicos

Columnas y filas

As a user, you can define the number of grid columns for the Tile Manager. To do this, simply set the column-count property to the desired number of columns.

Gap

The Gap property defines the space between tiles. The value of the gap property must be a number followed by a length unit (e.g., px, rem, em, …). This value will apply to both the horizontal gap (width) and the vertical gap (height) between tiles.

Anchura y altura mínimas

Are properties for setting the minimum width of the columns (min-column-width) and the minimum height of the rows (min-row-height) in the Tile Manager. Similar to the gap property, the values for these properties must be a number followed by a length unit.

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:

• The col-span property specifies how many columns the tile will span across in the layout, allowing you to control its horizontal size.
• The row-span property determines how many rows the tile will span vertically, adjusting the tile’s height within the layout.
• The col-start property specifies the starting column where the tile is placed.
• The row-start property specifies the starting row where the tile is placed.
• The disable-fullscreen property hides the default fullscreen action button.
• The disable-maximize property hides the default maximize toggle action button.
• The disable-resize property prevents the tile from being resized by the user.

Ignite UI for Angular 19.2.0 Changelog

Explora todos los detalles aquí.

General

• IgxCarousel
  • Removed deprecated property keyboardSupport.
• IgxSlide
  • Deprecation – tabIndex has been deprecated and will be removed in a future version.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • A column’s minWidth and maxWidth constrain the user-specified width so that it cannot go outside their bounds.
  • 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.
  • The pagingMode property can now be set as simple strings 'local' and 'remote' and does not require importing the GridPagingMode enum.
• 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.
  • Added a new schema input property that can be used to pass collection of EntityType objects. This property is required for remote data scenarios.
• IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
  • Se ha agregado compatibilidad con entidades con estructura jerárquica.
• EntityType
  • A new optional property called childEntities has been introduced that can be used to create nested entities.

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