Ignite UI for Angular 21.0 Is Out! What’s New & Exciting?

개발자들이 최신 Angular 혁신을 활용하려는 시기에, 프레임워크의 진화에 발맞추는 도구를 갖추는 것이 필수적이 됩니다. Ignite UI for Angular 21을 모든 새로운 요소와 맞추기 위해 흥미로운 기능과 개선 사항을 출시했습니다.

이번 릴리스로 Ignite UI for Angular 는 Angular 21에 대한 완전한 지원을 추가할 뿐만 아니라, 그리드 필터링 성능 향상, 새로운 그리드 PDF 익스포터, AI 채팅 컴포넌트도 도입했습니다.

Ignite UI for Angular와 관련된 또 다른 발표입니다. UI 도구 세트의 일환으로, Angular, React, Blazor, Web Components 등 MIT 라이선스 하에 50+ 개의 오픈소스 구성 요소를 제공함으로써 오픈 소스 커뮤니티에 힘을 실어줍니다. 이는 우리의 사명을 크게 확장한 것입니다: 모든 개발자가 모든 상황에 맞는 고성능 웹 애플리케이션을 구축할 수 있도록 현대적이고 기능이 풍부하며 미래 지향적인 도구를 제공하는 것입니다. 모든 세부 사항은" Ignite UI Releases 50+ 강력한 오픈 소스 컴포넌 트" 블로그에서 확인할 수 있습니다.

자세히 살펴보겠습니다.

최적화된 필터링 성능: 새로운 기준 세우기

Components: Angular Data Grid, Angular Tree Grid, Angular Hierarchical Grid, Angular Pivot Grid

Infragistics 성과는 단순한 목표가 아니라 약속입니다. Ignite UI for Angular 20.1에서 놀라운 정렬 최적화를 이룬 후, 우리는 필터링 성능에 주목하게 되었습니다. 방대한 데이터셋을 관리하는 애플리케이션에서는 필터링 속도가 매우 중요하며, 우리는 다시 한 번 기준을 높였습니다.

지난 개발 주기 동안 우리 팀은 격자 전반에 걸쳐 엑셀 스타일 필터링에 집중했으며, 100,000+ 레코드를 가진 시나리오를 타겟팅했습니다. 결과가 스스로 말해줍니다:

Opening Filter Dialog

• 번호 열: 3 배 이상 빨라요
• 스트링 칼럼: 4 배 이상 빨라요
• ID 열(모두 고유): 점진적이지만 의미 있는 개선 (~11% 빨라짐)

Applying Filter

• 번호 열: 9 배 이상 빨라요
• 스트링 칼럼: 5 배 이상 빨라요
• ID column: More than 9x faster

이러한 개선 덕분에 가장 까다로운 기업용 애플리케이션도 번 개처럼 빠른 필터링을 경험할 수 있어 더 부드럽고 반응성 좋은 사용자 경험을 제공합니다.

여기서 멈추지 않습니다 – 모든 Ignite UI 그리드의 성능 기준을 재정의할 예정인 개선 사항을 계속 지켜봐 주세요.

Grid PDF Exporter

​Ignite UI for Angular PDF 익스포터 서비스는​ ​IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid와 같은 고급 그리드 컴포넌트 등 다양한 원시 데이터 배열과 고급 그리드 컴포넌트에서 PDF 형식으로 데이터를 내보낼 수 있는 강력한 기능을 제공합니다. 내보내기 기능은 클래스에IgxPdfExporterService 캡슐화되어 있으며, 다중 페이지 문서 지원, 자동 페이지 나누기, 맞춤형 서식 옵션 등 포괄적인 기능과 함께 PDF 형식으로 원활한 데이터 내보내기가 가능합니다.

주요 특징:

Documentation for Ignite UI for Angular PDF Exporter service.

Angular AI Chat Component

​Ignite UI 채팅 컴포넌 트는 애플리케이션 내 대화형 인터페이스를 구축하는 데 완벽한 솔루션을 제공합니다. 고객 지원 도구, 협업 작업 공간, 챗봇 어시스턴트 등 어떤 형태로든 Chat 구성 요소는 필요한 기본 요소를 제공합니다: 문자 메시지 송수신, 파일 첨부 업로드, 제안에 대한 빠른 답변 표시, 상대방이 답변을 작성할 때 타이핑 표시 표시 등.

정적 메시지 목록과 달리, 이 컴포넌트는Chat 인터랙티브하며 실시간 통신을 위해 설계되었습니다. 입력, 렌더링, 사용자 상호작용을 관리하면서 메시지와 첨부파일이 어떻게 표시되는지 완전히 제어할 수 있습니다. 또한 레이아웃이나 시각적 요소의 모든 부분을 덮어쓸 수 있는 광범위한 렌더링 API를 제공합니다.

채팅 구성 요소에 대한 문서 Ignite UI for Angular.

다중 진입 지점 지원

Ignite UI for Angular 라이브러리는 더 나은 트리 셰이킹과 코드 분할을 위해 다중 진입점을 지원합니다. 주요 진입 지점igniteui-angular은 모든 세분화된 진입 지점을 재내보내 완전한 하위 호환성을 유지하지만, 최적의 번들 크기를 위해 새로운 진입 지점으로 이전하는 것을 권장합니다.

Benefits:

• 더 나은 트리 흔들기 – 사용하지 않는 부품은 묶이지 않습니다
• 코드 분할 – 각 컴포넌트를 따로 레이지 로드할 수 있습니다
• 더 작은 번들 크기 – 필요한 것만 가져오기
• 향상된 빌드 성능

Ignite UI for Angular 코드 분할과 다중 진입 지점에 관한 문서.

Ignite UI for Angular 21.0 변경 로그 완전

테마

• IgxButton
  • Breaking Change
    • 다음의 그림자 관련 매개변수들이 앤outlined-button-theme에서flat-button-theme 제거되었습니다:
      • resting-shadow
      • hover-shadow
      • focus-shadow
      • active-shadow

신규 기능

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Added PDF export functionality to grid components. Grids can now be exported to PDF format alongside the existing Excel and CSV export options.The new IgxPdfExporterService follows the same pattern as Excel and CSV exporters:import { IgxPdfExporterService, IgxPdfExporterOptions } from ‘igniteui-angular’; constructor(private pdfExporter: IgxPdfExporterService) {} exportToPdf() { const options = new IgxPdfExporterOptions(‘MyGridExport’); options.pageOrientation = ‘landscape’; // ‘portrait’ or ‘landscape’ (default: ‘landscape’) options.pageSize = ‘a4’; // ‘a3’, ‘a4’, ‘a5’, ‘letter’, ‘legal’, etc. options.fontSize = 10; options.showTableBorders = true; this.pdfExporter.export(this.grid, options); }The grid toolbar exporter component now includes a PDF export button: 주요 특징:
    • 자동 페이지 나누기 기능이 있는 다중 페이지 지원​
    • 트리그리드(들여쓰기 포함)와 계층적 그리드(자식 테이블 포함)의 계층적 시각화​
    • Multi-level column headers (column groups) support
    • 적절한 값 서식의 요약 행​
    • 긴 콘텐츠에 생략이 적용된 텍스트 절단​
    • Landscape orientation by default (suitable for wide grids)
    • 지원되는 19개 언어 모두에 대한 국제화 지원
    • 모든 그리드 내보내기 옵션을 존중합니다(필터 무시, 정렬 무시, 열자 가시성 무시화 등).

주요 변경 사항

의존성 주입 리팩터

• 모든 내부 DI는 이제 API를 사용합니다inject()​igniteui-angular (라이브러리 코드에서 더 이상 constructor DI가 없습니다).
• 컴포넌트/서비스를 확장하거나 직접 컨스트럭터를 호출할 때는 DI 매개변수를 제거하고 (예: )로inject() 전환하세요.protected foo = inject(FooService);​
• 템플릿을 통한 앱 사용은 동일하며; 서브클래스나 타입 무시하지 않는 이상 행동은 필요 없습니다.

다중 진입 지점 지원

라이브러리는 더 나은 트리 셰이킹과 코드 분할을 위해 여러 진입점을 지원합니다. 주요 진입점(igniteui-angular)은 모든 세분화된 진입점을 재내보내는 방식으로 완전히 하위 호환성을 유지하지만, 최적의 번들 크기를 위해 새로운 진입점으로 마이그레이션하는 것을 권장합니다.

진입 지점:

• igniteui-angular/core– 핵심 유틸리티, 서비스 및 베이스 유형
• igniteui-angular/directives– 공통 지침
• 부품별 진입 지점:igniteui-angular/grids 등igniteui-angular/input-group​igniteui-angular/drop-down.
• 트리 흔들기 가능한 가져오기를 위한 그리드별 진입 지점:
  • igniteui-angular/grids/core– 공유 그리드 인프라(열, 툴바, 필터링, 정렬 등)
  • igniteui-angular/grids/grid– 표준 격자 구성 요소 (IgxGridComponent)
  • igniteui-angular/grids/tree-grid– 트리 그리드 구성 요소 (IgxTreeGridComponent)
  • igniteui-angular/grids/hierarchical-grid– 계층적 격자 구성 요소 (IgxHierarchicalGridComponent,IgxRowIslandComponent)
  • igniteui-angular/grids/pivot-grid – Pivot grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

이주: 마이그레이션 시ng update 선택적으로 가져오기 파일을 새로운 진입 지점으로 이전하도록 안내합니다. 마이그레이션을 하지 않기로 선택하면, 완전한 하위 호환성을 가진 메인 엔트리 포인트를 계속 사용할 수 있습니다.

나중에 수동으로 마이그레이션하려면 다음:

NG 업데이트 igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

구성 요소 이전:

• Input directives (IgxHintDirective, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective) → igniteui-angular/input-group
• IgxAutocompleteDirective → igniteui-angular/drop-down
• IgxRadioGroupDirective → igniteui-angular/radio

유형 변경 (충돌 방지):

• Direction → CarouselAnimationDirection (in carousel)

Benefits:

• 더 나은 트리 흔들기 – 사용하지 않는 부품은 묶이지 않습니다
• 코드 분할 – 각 컴포넌트를 따로 레이지 로드할 수 있습니다
• 더 작은 번들 크기 – 필요한 것만 가져오기
• 향상된 빌드 성능

진입 지점에 대한 자세한 내용은 Angular 패키지 형식 문서를 참조하세요.

요약하자면...

호환성을 위해 매끄럽게 제작된 Ignite UI for Angular는 최신 기술과 주요 릴리스의 기능을 활용할 수 있는 라이브러리입니다. 최고의 Angular UI 툴킷 및 관련 인사이트를 제공하기 위해 최선을 다하고 있으며, 더 많은 노하우, 새로운 기능, 향상된 성능 및 향상된 안정성을 제공하는 것이 목표입니다. Ignite UI for Angular GitHub 리포지토리를 통해 여러분과 같은 사용자의 요청 덕분에 일부 개선 사항이 추가되었습니다. 이를 염두에 두고 우리는 항상 제안과 피드백에 열려 있습니다 – 이를 통해 우리는 성장하고 귀하의 개발 요구에 더 잘 대응할 수 있습니다.

자세한 내용이 필요한 경우 다음을 확인하는 것이 좋습니다.

• 디스코드 채널
• GitHub 토론
• 로드맵
• YouTube 채널