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

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

이번 릴리스는 세 가지 통합 AI Copilot 스킬을 저장소에 직접 발급하여 라이브러리의 개발-에이전트 전략을 발전시켰습니다. 하지만 이것이 전부가 아닙니다. 자세한 내용은 여기에서 확인하세요.

10min read

Ignite UI for Angular 21.1은 현재 NPM에서 이용 가능합니다. 이번 릴리스는 세 가지 통합 AI Copilot 스킬을 저장소에 직접 발급하여 라이브러리의 개발-에이전트 전략을 발전시켰습니다. 또한 경량IgxGridLiteComponent Angular 래퍼를 개발자 프리뷰에 도입하고, 오버레이 서비스 전반에 HTML Popover API를 도입하여 오랫동안 존재해온 z-index 문제를 해결합니다. 업그레이드하러 달려가ng update igniteui-angular 세요.

Ignite UI for Angular 21.1의 새로운 소식

  • AI 코파일럿 스킬: 코파일럿, 커서, 클로드, 윈드서프에게 Ignite UI 컴포넌트, 그리드, 테마 작업을 가르치는 세 가지 구조화된 지식 파일; 마이그레이션을 통해ng update 자동 발견됨.
  • IgxGridLiteComponent: (개발자 미리보기)—Angular 래퍼igc-grid-lite로, 양방향 바인딩 가능한 정렬/필터 표현식과 Angular 템플릿 명령어가 포함된 것으로, 새로운igniteui-angular/grids/lite 진입 지점에서 사용할 수 있습니다.
  • 그리드 가상화 성능: 10만 행에서 100–150% FPS 향상과 총 블로킹 시간 50–60% 감소, 6개의 목표 렌더링 및 변경 감지 최적화에 의해 구동됨
  • 오버 레이 팝오버 API를IgxOverlayService 적용하고IgxNavigationDrawer 이제 브라우저의 기본 최상위 API를 사용하여 z-인덱스 스태킹 버그를 구조적으로 제거합니다.
  • 국제 기반 i18n 전면 개편: 모든 날짜/숫자 포맷팅 구성 요소와 새로운Intl 패키지 전반에 걸쳐 새로운igniteui-i18n-resources 구현.

변경 중단:igxForOf 모든 그리드가 원래 데이터 배열에서 돌연변이를 감지하지 않게 됩니다; 새로운 배열 참조를 전달하여 변경 감지를 트리거합니다

npm install igniteui-angular@21.1
​전체 변경 로그는 여기에서 확인하세요.

Exciting AI Copilot Skills

Ignite UI for Angular 21.1은 저장소에 세 개의 통합 Copilot Skill 파일을 직접 제공하는데, 이는 이번 릴리스에서 가장 중요한 개발자 경험 추가 요소입니다.

세 가지 기술은 구성요소(폼 컨트롤, 레이아웃, 데이터 표시, 오버레이, 차트), 데이터 그리드(데이터 그리드, 트리 그리드 계층적 그리드, 피벗 그리드, 열 설정, 편집, 원격 데이터, 상태 지속성), 그리고 테마 및 스타일링(팔레트, 타이포그래피, 입면도, 실시간 MCP 툴링)을 포함합니다.

아키텍처: 린 브레인 + 실행 가능한 참조

각 기술은 에이전트가 소비할 수 있는 지식에 대한 현재의 모범 사례를 반영한 2층 구조를 따릅니다. 진입 지점은 의도적으로 500줄 미만으로 유지된 파일입니다SKILL.md. 이 시스템은 에이전트의 의사결정 뇌 역할을 합니다: 라우팅 논리, 구성 요소 선택 규칙, 의도 감지, 그리고 상세 지식이 어디에 있는지 가리키는 포인터. API 문서의 덤프가 아닙니다.

무거운 작업은 각 기술 옆의 하위 디렉터리에 있습니다references/. 이 파일들은 아주 작은 CLI로 설계되어 있으며, 각각 단일 도메인에 스코핑된 실행 가능한 지식 단위입니다: API 치트시트, 정식 코드 패턴, 도메인 로직(그리드 유형 선택 휴리스틱, 테마 범위 규칙, 복합 컴포넌트 배선). 작업을 실행하는 에이전트는 해당 작업에 필요한 참조 파일만 로드하며, 전체 라이브러리 표면을 불러오지 않습니다.

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

이 구조는 에이전트의 성과에 중요합니다.SKILL.md 4,000줄에 달하는 API 문서의 벽은 기술이 아니라 맥락 윈도우 세금입니다. 린을 유지하면SKILL.md 에이전트가 라우팅 결정을 저렴하게 내리고, 필요한 참조만 로드할 수 있으며, 모든 완료 호출에 전체 API 표면을 끌어다 놓지 않습니다.

GitHub Copilot은 기술을 통해 자동으로.github/copilot-instructions.md 발견됩니다. 커서가 디렉토리에서skills/ 그들을 집어 들어갑니다. Claude 데스크톱과 Claude Code 사용자는 파일을 프로젝트 지식에 추가하거나 참조CLAUDE.md 할 수 있습니다. JetBrains AI와 윈드서핑 사용자들은 수동으로 부착할 수 있습니다. 이 릴리스는 전체 스킬 트리를 프로젝트에 복사하는 선택적ng update 마이그레이션을 제공합니다.

이것은 독립적인 기능이 아니라 MCP 서버에서igniteui-theming 시작된 전략의 다음 계층입니다. MCP 서버가 에이전트에게 팔레트 생성과 구성 요소 테마 스캐폴딩을 위한 실시간 테마 도구를 제공했다면, 스킬은 에이전트가 해당 도구를 올바르게 선택하고 구성하며 구성할 수 있도록 필요한 선언적 지식을 제공합니다. 이들은 함께 완전한 AI 지원 워크플로우를 형성합니다: 에이전트는 무엇을 만들어야 하는지 알고, MCP 서버는 에이전트에게 그것을 구축할 도구를 제공합니다. UI 라이브러리 + MCP + 스킬 모델이 실제로 어떤 모습일지 명확히 보여주었는데, 21.1은 Angular 구현을 Infragistics 출시하고 있습니다.

여기 AI 지원 개발 문서가 있습니다.

IgxGridLiteComponent (Developer Preview)

IgxGridLiteComponent웹 컴포넌트를 Angularigc-grid-lite 래퍼로 만든 것으로, 현재 전용igniteui-angular/grids/lite 진입 지점에서 이용할 수 있습니다.

Grid Lite는 편집, 그룹화, 페이징, 요약 없이 가상화, 정렬, 필터링, 셀과 헤더에 대한 템플릿 지시 Angular 없는 고IgxGridComponent 처리량 읽기 지향 데이터 표시가 필요한 시나리오를 위해 설계되었습니다. 래퍼는 양방향 바인더블sortingExpressions과filteringExpressions 입력을 추가하여 그리드가 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[]>([]);
}

Grid Lite는 별도의igniteui-grid-lite 피어 패키지(npm i igniteui-grid-lite)를 필요로 하며,CUSTOM_ELEMENTS_SCHEMA 기본 구성 요소가 웹 컴포넌트이기 때문입니다. 자체 방식과IgxGridLiteSortingExpression 타입을 사용IgxGridLiteFilteringExpression 하며, 표준ISortingExpression 이나FilteringExpressionsTree 전체 그리드에서 가져온 것이 아닙니다.

Here’s the Grid Lite documentation.

그리드 가상화 및 스크롤링 성능

IgxGrid​IgxTreeGrid,,IgxHierarchicalGrid,그리고IgxPivotGrid 21.1에서 6개의 렌더링 및 변경 감지 최적화 세트를 목표로 했습니다. 10만 행 데이터셋에 100번의 스크롤 연산을 적용한 결과: ~40–55 FPS vs. 이전 ~15–25 FPS(100–150% 개선), 총 블로킹 시간은 ~8–12초에서 ~3–5초로 줄어들었습니다(50–60% 감소).

각 최적화는 가상 스크롤 파이프라인의 뚜렷한 병목 현상을 해결합니다:

CSS 위치transform: translateY() 지정줄 재배치 시 레이아웃 재흐름을 없애줍니다. 이전에는 스크롤style.top 프레임당 동기화된 레이아웃 사이클로 브라우저를 강제했습니다. GPU 가속 변환은 이를 완전히 우회합니다 — 도색 시간은 스크롤 이벤트당 약 50–70% 정도 줄어듭니다.

변경 감지가 속성ngDoCheck 설정자로 이동 되면 변경 감지 평가 횟수가 30%에서 50% 줄어듭니다.ngDoCheck 스크롤 상태가 변경되었든 없든 매 Angular CD 사이클마다 발화됩니다; 속성 세터는 데이터가 변경될 때 정확히 한 번 발화됩니다.

스크롤 이벤트 제한은 40ms로 감소했으며 (초당 ~60+ raw 이벤트에서 초당 ~25로 감소, 실행 중인 핸들러가 약 60% 줄었습니다). 이것은 동적입니다: 스로틀 창은 가시적 행 수에 따라 조정되기 때문에, 희소한 뷰에서의 성능이 인위적으로 제한되지 않습니다.

사전 할당된 배열이 건물 내에서push() 교체sizesCache 됩니다. 반복 호출은push() 배열이 커질수록 O(n) 개의 내부 크기 변경 및 복사 작업을 유발합니다. 사전new Array(n) 할당을 하면 O(1) 개의 직접 인덱스 할당이 가능하며, 가상 스크롤 초기화 시 캐시 구축 속도가 20–40% 빨라집니다.

캐시된 DOM 요소 조회는 스크롤 이벤트당 반복되는.map() 탐색을 단일 트래픽으로 대체하며, 그 결과는 게터에 저장되어 스크롤 이벤트당 15–25% 적은 CPU 사이클을 사용합니다.

중복@HostListener 스크롤 이벤트 경로를 제거 하여 중복 이벤트 처리 분기를 제거하여 추가로 10–15%의 오버헤드 감소를 달성했습니다.

벤치마크 하드웨어에 대한 영향(10만 행, 100 스크롤 연산)을 측정한 총합:

Metric전에후에Delta
Long Tasks Count~80–120~30–50−50%에서 −60%
Avg Long Task Duration~80–120ms~55–75ms−30%에서 −40%
Total Blocking Time~8–12 sec~3–5 sec−50%에서 −60%
Frames per second~15–25 fps~40–55 fps+100%에서 +150%까지

이러한 개선을 위해 API 변경은 필요하지 않습니다. 최적화는 데이터 소스에 바인딩된 모든 그리드에 자동으로 적용됩니다.

여기 Grid 성능 문서가 있습니다.

Overlay Popover API

IgxOverlayService그리고IgxNavigationDrawer 이제 브라우저의 기본 HTML Popover API를 사용해 상단 레이어에 오버레이 요소를 배치할 수 있습니다.

실질적인 효과: 오버레이, 드롭다운, 대화 상자, 그리고 고정 해제 시 내비게이션 서랍이 더 이상 애플리케이션의 z-index 스택과 경쟁하지 않습니다. 대신 브라우저의 전용 최상위 계층에 위치하는데, 이는 네이티브<dialog>와popover 요소들이 사용하는 동일한 계층으로, 값과 상관z-index 없이 항상 일반 문서 스태킹 컨텍스트 위에 위치합니다. 이는 복잡한 레이아웃에서 수작업으로 z-index 튜닝이 필요했던 문제들을 해결해줍니다. 특히 여러 스태킹 컨텍스트(변환된 컨테이너, Dock Manager 영역 등)를 사용하는 애플리케이션에서 더욱 그렇습니다. 고정된 컨테이너 경계를 가진 컨테이너 기반 오버레이의 위치 정확도도 향상되었습니다.

귀하 쪽에서는 API 변경이 필요하지 않습니다. 동작 업그레이드는 기존overlaySettings 사용에 투명하게 적용됩니다.

여기 오버레이 서비스 문서가 있습니다.

국제 기반 i18n 및 New igniteui-i18n-resources 패키지

날짜와 숫자를 포맷하거나 표시하는 모든 Ignite UI for Angular 구성 요소의 현지화 시스템이 브라우저 네이티Intl 브 API로 재구축되었습니다.

영향을 받는 구성 요소에는 ,등 다양한 항목이 포함됩니다IgxGrid​IgxTreeGrid​IgxHierarchicalGrid​IgxPivotGrid​IgxCalendar​IgxDatePicker​IgxDateRangePicker​IgxTimePicker​IgxCombo​IgxList​IgxPaginator.IgxQueryBuilder 이전의 Angular-pipe 기반 포맷은 Angular 로컬이 구성될 때 여전히 사용됩니다;Intl 로케이션이 설정되어 있지 않거나 새로운 공개 API를 통해 명시적으로 활성화되었을 때 사용됩니다.

이 변화와 함께 새로운 패키지igniteui-i18n-resources,, 가 제공되며, 새 구현 하에 지원되는 19개 언어 모두의 리소스 문자열을 포함하고 있습니다. 기존igniteui-angular-i18n 문자열과 API는 여전히 기능하며, 강제 마이그레이션이나 행동 변경이 없으며, 선택하지 않는 한 적용됩니다.

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

여기 현지화 문서가 있습니다.

이번 보도자료에서 더 많은 내용

PDF 익스포터 — 유니코드 폰트 지원. IgxPdfExporterOptions 이제 속성을customFont 받아들여 어떤 TTF 폰트도 base64 인코딩 데이터로 제공할 수 있습니다. 기본 헬베티카 폰트는 기본 라틴어로 제한되어 있습니다; 이로 인해 내보내는 PDF에서 키릴 문자, 중국어, 일본어, 아랍어, 히브리어 등 다양한 문자 문자가 잠금 해제됩니다.

IgxTooltipTarget — configurable triggers. 새로운showTriggers 입력은 쉼표로 구분된 이벤트 이름(예:hideTriggers​'click,focus')을 받아 이전의 고정/'keypress,blur'​pointerenter 동작을 대체pointerleave 합니다.

Breaking Changes & Migration

데이터 배열 돌연변이 탐지 제거
영향을 받았다:igxForOf,IgxGrid,IgxTreeGrid,IgxHierarchicalGrid,IgxPivotGrid
변경 사항: 원래 배열(push,splice,,sort 등)을 변형하여 레코드를 추가, 삭제 또는 재정렬해도 변경 감지가 발생하지 않습니다. 컴포넌트는 이제 업데이트하기 위해 배열 참조 변경이 필요합니다.

마이그레이션: 돌연변이를 변이 대신 불변 연산[...data, newItem]​data.push(newItem)으로 대체하거나, 돌연변이 후에 새로운 배열 참조를 할당합니다.

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

IgxGridGroupByAreaComponent진입 지점 변경
영향을 받는 경우: 에서 임IgxGridGroupByAreaComponent 포트하는 모든igniteui-angular/grids/core
변경 사항: 구성 요소가 진입 지점으로igniteui-angular/grids/grid 이동했습니다.
마이그레이션: 실행—ng update igniteui-angular마이그레이션이 자동으로 가져오기 경로를 업데이트하도록 안내합니다.

여기 마이그레이션 가이드와 업데이트 지침이 있습니다.

위에 나열된 두 가지 외에는 이번 릴리스에서 추가적인 획기적인 변경 사항이 없습니다.

시작하는 방법

오늘 Ignite UI for Angular 설치하거나 업그레이드하세요:

# 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
데모 요청