Ignite UI for Angular 21.1: Habilidades de IA y mejoras en el rendimiento de la red

Ignite UI for Angular 21.1: AI Skills & Grid Performance Improvements

Esta versión avanza la estrategia de desarrollo de la biblioteca con tres habilidades consolidadas de IA Copilot enviadas directamente en el repositorio. Pero esto no es todo. Lee más aquí.

10 minutos de lectura

Ignite UI for Angular 21.1 ya está disponible en NPM. Esta versión avanza la estrategia de desarrollo de la biblioteca con tres habilidades consolidadas de IA Copilot enviadas directamente en el repositorio. También incorpora el envoltorio ligeroIgxGridLiteComponent de Angular a la Developer Preview y resuelve una clase de problemas de z-index de larga duración adoptando la API HTML Popover en todo el servicio de superposición. Correng update igniteui-angular a mejorar.

Novedades en Ignite UI for Angular 21.1

  • Habilidades de Copiloto de IA: tres archivos de conocimiento estructurado que enseñan a Copiloto, Cursor, Claude y Windsurf a trabajar con componentes de Ignite UI, cuadrículas y tematización; Descubrido automáticamente medianteng update migración.
  • IgxGridLiteComponent: (Developer Preview)—Angular envoltorioigc-grid-lite con expresiones de ordenación/filtro bindables y directivas de Angular plantilla, disponible desde el nuevoigniteui-angular/grids/lite punto de entrada.
  • Rendimiento en virtualización de cuadrícula: mejora del 100–150% en FPS y reducción del 50–60% en el tiempo total de bloqueo en 100.000 filas, impulsado por seis optimizaciones específicas de renderizado y detección de cambios
  • Superponer la API de Popover:IgxOverlayService yIgxNavigationDrawer ahora usar la API nativa de capa superior del navegador, eliminando estructuralmente los errores de apilamiento del índice z.
  • Revisión i18n basada en internacional: nuevaIntl implementación en todos los componentes de formato de fechas/números más un nuevoigniteui-i18n-resources paquete.

Cambio interrumpido:igxForOf y todas las cuadrículas ya no detectan mutaciones en el array de datos original; pasa una nueva referencia del array para activar la detección de cambios

npm install igniteui-angular@21.1
Consulta el registro completo de cambios aquí.

Exciting AI Copilot Skills

Ignite UI for Angular 21.1 incluye tres archivos consolidados de habilidades Copilot directamente en el repositorio, la adición más significativa para la experiencia de desarrollador en esta versión.

Las tres habilidades incluyen: Componentes (controles de formulario, diseño, visualización de datos, superposiciones, gráficos), Cuadrículas de Datos (cuadrícula de datos, cuadrícula jerárquica de árbol, cuadrícula pivote, configuración de columnas, edición, datos remotos, persistencia de estados) y Tematizado y Estilismo (paleta, tipografía, elevaciones y herramientas MCP en vivo).

Arquitectura: Cerebro Enxuto + Referencias Ejecutables

Cada habilidad sigue una estructura de dos capas que refleja las mejores prácticas actuales para el conocimiento consumible por agentes. El punto de entrada es unSKILL.md archivo que se mantiene deliberadamente por debajo de 500 líneas. Actúa como el cerebro de decisión del agente: lógica de enrutamiento, reglas de selección de componentes, detección de intención y indicadores hacia donde reside el conocimiento detallado. Nunca es un volcado de documentación de la API.

El trabajo pesado se sitúa en unreferences/ subdirectorio junto a cada habilidad. Estos archivos están diseñados como pequeñas líneas de código — unidades de conocimiento ejecutables y autosuficientes, cada una con un único ámbito: hojas de trucos de API, patrones de código canónicos, lógica de dominio (heurísticas de selección de tipos de cuadra, reglas de alcance de tematización, cableado de componentes compuestos). Un agente que ejecuta una tarea solo carga los archivos de referencia que necesita para esa tarea específica, no toda la superficie de la biblioteca.

skills/
    igniteui-angular-components/
    ├── SKILL.md                  ← brain: routing + intent detection (<500 lines)
    └── references/
        ├── form-controls.md      ← Input Group, Combo, Select, pickers
        ├── layout.md             ← Tabs, Stepper, Accordion, Dock Manager
        ├── data-display.md       ← List, Card, chips, tree
        ├── overlays.md           ← Dialog, Snackbar, Tooltip, positioning
        └── charts.md             ← Area, Bar, Column, Financial, Pie
 
    igniteui-angular-grids/
    ├── SKILL.md                  ← brain: grid type selection + orchestration (<500 lines)
    └── references/
        ├── structure.md          ← column config, templates, selection, layout
        ├── features.md           ← editing, grouping, summaries, toolbar, export
        ├── types.md              ← Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid
        ├── data-operations.md    ← sorting, filtering, grouping, import patterns
        ├── paging-remote.md      ← paging, remote ops, virtualization
        ├── editing.md            ← cell/row/batch editing, validation
        └── state.md              ← state persistence, grid-type specifics
 
    igniteui-angular-theming/
    ├── SKILL.md                  ← brain: palette/schema/MCP orchestration (<500 lines)
    └── references/               ← token discovery, component theme scaffolding

Esta estructura es importante para el rendimiento del agente. UnSKILL.md muro de 4.000 líneas de documentación de API no es una habilidad — es un impuesto contextual de ventana. MantenerSKILL.md la enjuicia significa que el agente puede tomar decisiones de enrutamiento de forma económica y cargar solo la referencia que necesita, en lugar de arrastrar toda la superficie de la API en cada llamada de completación.

GitHub Copilot descubre habilidades automáticamente a través de.github/copilot-instructions.md El cursor los detecta delskills/ directorio. Los usuarios de Claude Desktop y Claude Code pueden añadir los archivos para proyectar conocimientos o referenciarlosCLAUDE.md. Los usuarios de IA y windsurf de JetBrains pueden conectarlos manualmente. Esta versión incluye una migración opcionalng update que copia el árbol completo de habilidades en tu proyecto.

Esto no es una función independiente — es la siguiente capa en una estrategia que comenzó con eligniteui-theming servidor MCP. Mientras que el servidor MCP daba a los agentes acceso a herramientas de tematización en vivo para la generación de paletas y el andamiaje de temas de componentes, las Skills proporcionan a los agentes el conocimiento declarativo necesario para elegir, configurar y componer correctamente esas herramientas. Juntos, forman un flujo de trabajo completo asistido por IA: el agente sabe qué construir y el servidor MCP le proporciona los instrumentos para construirlo. Cómo es este modelo de librería UI + MCP + habilidades en la práctica dejó claro el argumento — la 21.1 Infragistics es la implementación Angular.

Aquí tienes la documentación de Desarrollo Asistido por IA.

IgxGridLiteComponent (Developer Preview)

IgxGridLiteComponentes un envoltorio Angular alrededor deligc-grid-lite Componente Web, ahora disponible desde un punto de entrada dedicadoigniteui-angular/grids/lite.

Grid Lite está diseñado para escenarios donde necesitas una visualización de datos orientada a lectura de alto rendimiento sin la superficie completa deIgxGridComponent características: sin edición, agrupación, paginación ni resúmenes, sino con virtualización, ordenación, filtrado y directivas de plantilla Angular para celdas y cabeceras. El envoltorio añade enlacessortingExpressions bidireccionales yfilteringExpressions entradas para que la cuadrícula se integre de forma natural con el modelo de reactividad de Angular.

import {
  IgxGridLiteComponent,
  IgxGridLiteColumnComponent,
  IgxGridLiteCellTemplateDirective
} from 'igniteui-angular/grids/lite';
@Component({
  imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <igx-grid-lite [data]="data()">
      <igx-grid-lite-column field="name" header="Name" [sortable]="true">
        <ng-template igxGridLiteCell let-value>
          <strong>{{ value }}</strong>
        </ng-template>
      </igx-grid-lite-column>
    </igx-grid-lite>
  `
})
export class UsersLiteComponent {
  data = signal<User[]>([]);
}

Ten en cuenta que Grid Lite requiere el paquete peer separadoigniteui-grid-lite (npm i igniteui-grid-lite) yCUSTOM_ELEMENTS_SCHEMA porque el componente subyacente es un Componente Web. Utiliza sus propiosIgxGridLiteSortingExpression tiposIgxGridLiteFilteringExpression y — no el estándarISortingExpression oFilteringExpressionsTree desde las cuadrículas completas.

Here’s the Grid Lite documentation.

Virtualización de cuadrícula y rendimiento de desplazamiento

IgxGrid,IgxTreeGrid,IgxHierarchicalGrid, yIgxPivotGrid recibió un conjunto objetivo de seis optimizaciones de renderizado y detección de cambios en la versión 21.1. El resultado combinado en un conjunto de datos de 100.000 filas con 100 operaciones de desplazamiento: ~40–55 FPS frente a ~15–25 FPS antes (mejora del 100–150%), y el tiempo total de bloqueo se redujo de ~8–12 segundos a ~3–5 segundos (reducción del 50–60%).

Las optimizaciones individuales abordan cada una un cuello de botella distinto en la tubería de scroll virtual:

Posicionamiento CSS cambiado atransform: translateY() Elimina el reflujo de layout al reposicionar filas. Antes, escribir parastyle.top forzar al navegador a un ciclo de diseño síncrono por cada marco de desplazamiento. Las transformaciones aceleradas por GPU lo evitan por completo: el tiempo de pintura disminuye entre un 50 y un 70% por evento de desplazamiento.

La detección de cambios pasada dengDoCheck los sistemas de asignación de propiedades reduce el número de evaluaciones de detección de cambios entre un 30 y un 50%.ngDoCheck se activa cada ciclo de Angular CD independientemente de si el estado del desplazamiento ha cambiado; Un setter de propiedades se activa exactamente una vez cuando cambian los datos.

La limitación de eventos de desplazamiento bajó a 40 ms (de ~60+ eventos en bruto por segundo a ~25 procesados por segundo, aproximadamente un 60% menos de manejadores ejecutando). Esto es dinámico: la ventana de aceleración se ajusta en función del número de filas visibles, por lo que el rendimiento en vistas dispersas no está limitado artificialmente.

Los arreglos preasignados se reemplazanpush() en elsizesCache edificio. Las llamadas repetidaspush() activan O(n) operaciones internas de redimensionamiento y copia a medida que el array crece. Preasignar connew Array(n) convierte eso en asignación directa de índice O(1) – construcción de caché un 20–40% más rápida durante la inicialización de scroll virtual.

La búsqueda de elementos DOM en caché reemplaza los recorridos repetidos.map() por evento de desplazamiento por uno único cuyo resultado se mantiene en un getter -15–25% menos ciclos de CPU por evento de desplazamiento.

Se eliminó la@HostListener ruta duplicada de eventos de desplazamiento, eliminando una rama redundante de procesamiento de eventos para una reducción adicional del 10–15% de sobrecarga.

El impacto agregado medido en el hardware evaluado (100.000 filas, 100 operaciones de desplazamiento):

MetricAntesDespuésDelta
Long Tasks Count~80–120~30–50−50% a −60%
Avg Long Task Duration~80–120ms~55–75ms−30% a −40%
Total Blocking Time~8–12 sec~3–5 sec−50% a −60%
Frames per second~15–25 fps~40–55 fps+100% a +150%

No se requieren cambios en la API para beneficiarse de estas mejoras. Las optimizaciones se aplican automáticamente a cualquier red vinculada a una fuente de datos.

Aquí tienes la documentación de rendimiento de Grid.

Overlay Popover API

IgxOverlayServiceyIgxNavigationDrawer ahora usar la API nativa HTML Popover del navegador para colocar elementos superpuestos en la capa superior.

El efecto práctico: las superposiciones, menús desplegables, diálogos y el cajón de navegación, cuando están desbloqueados, ya no compiten con la pila z-index de tu aplicación. En su lugar, aterrizan en la capa superior dedicada del navegador — la misma capa usada por native<dialog> ypopover elements — que siempre está por encima del contexto regular de apilamiento de documentos, independientemente de suz-index valor. Esto resuelve toda una clase de problemas que requerían ajuste manual del índice z en diseños complejos, especialmente en aplicaciones que usan múltiples contextos de apilamiento (contenedores transformados, regiones del Dock Manager, etc.). También se mejora la precisión de posicionamiento para superposiciones basadas en contenedores con límites fijos del contenedor.

No se requieren cambios en la API por tu parte. La mejora de comportamiento se aplica de forma transparente al uso existenteoverlaySettings.

Aquí tienes la documentación del servicio Overlay.

Paquete i18n basado en el Nivel Internacional y New igniteui-i18n-resources

El sistema de localización en todos los Ignite UI for Angular componentes que formatean o muestran fechas y números ha sido reconstruido en la API nativaIntl del navegador.

Los componentes afectados incluyenIgxGrid,IgxTreeGrid​IgxHierarchicalGrid,IgxPivotGrid,IgxCalendar,IgxDatePicker,IgxDateRangePicker​IgxTimePicker​IgxCombo​IgxList​IgxPaginator​IgxQueryBuilder y más. El formato anterior basado en Angular-pipe sigue utilizándose cuando se configura una zona Angular;Intl se utiliza cuando no se ha configurado ninguna localización, o cuando está explícitamente habilitada a través de la nueva API pública.

Un nuevo paqueteigniteui-i18n-resources viene junto con este cambio, que contiene las cadenas de recursos para los 19 lenguajes soportados bajo la nueva implementación. Las cadenas antiguasigniteui-angular-i18n y la API siguen funcionando: no hay migración forzada, ni cambios de comportamiento a menos que hagas tu consentimiento.

// New API: toggle fully to Intl-based formatting
import { configureLocalization } from 'igniteui-i18n-resources';
configureLocalization({ useIntl: true, locale: 'de-DE' });

Aquí tienes la documentación de localización.

Más en este lanzamiento

PDF Exporter — Soporte para fuentes Unicode. IgxPdfExporterOptions ahora acepta unacustomFont propiedad que te permite proporcionar cualquier fuente TTF como datos codificados en base64. La fuente Helvetica por defecto está limitada al latín básico; esto desbloquea escrituras cirílicas, chinas, japonesas, árabes, hebreas y otras en PDFs exportados.

IgxTooltipTarget — disparadores configurables. Las entradas nuevasshowTriggers yhideTriggers aceptan nombres de eventos separados por comas (por ejemplo'click,focus', ),'keypress,blur' reemplazando al comportamiento fijopointerenter​pointerleave /comportamiento anterior.

Breaking Changes & Migration

Se elimina la detección de mutaciones en los arreglos de datos
Afectado:igxForOf,IgxGrid,IgxTreeGrid,,IgxHierarchicalGrid​IgxPivotGrid
Qué cambió: Añadir, eliminar o reordenar registros mutando el array original (push,splice,sort, etc.) ya no activa la detección de cambios. Los componentes ahora requieren un cambio de referencia en un array para actualizarse.

Migración: Sustituye las mutaciones por operaciones inmutables en[...data, newItem] lugar dedata.push(newItem), o asigna una nueva referencia de array tras las mutaciones.

// Before (no longer works)
this.data.push(newRecord);
// After (required)
this.data = [...this.data, newRecord];
// or with signals:
this.data.update(prev => [...prev, newRecord]);

IgxGridGroupByAreaComponentCambio de punto de entrada
Afectado: Cualquier importación deIgxGridGroupByAreaComponent deigniteui-angular/grids/core
Qué ha cambiado: El componente se ha trasladado aligniteui-angular/grids/grid punto de entrada.
Migración: Ejecutarng update igniteui-angular— la migración te pedirá que actualices automáticamente la ruta de importación.

Aquí tienes la guía de migración e instrucciones de actualización.

No hay cambios adicionales en esta versión más allá de los dos mencionados anteriormente.

Cómo empezar

Instala o actualiza Ignite UI for Angular hoy mismo:

# New install
npm install igniteui-angular@21.1
# Upgrade existing project (runs migrations automatically)
ng update igniteui-angular
# Grid Lite peer dependency (required for IgxGridLiteComponent)
npm install igniteui-grid-lite

Angular
Solicitar una demostración