Ignite UI for Angular 20.1이 출시되었습니다! 새롭고 흥미로운 것은 무엇입니까?

코드의 복잡성과 싸우고 계십니까? 음, Ignite UI for Angular 20.1 릴리스는 개발 워크플로와 프로세스를 간소화하고 촉진하는 것입니다. 우리는 완전히 새로운 기능과 성능 향상을 통해 Angular 그리드가 더 잘 작동하도록 두 배로 노력했습니다. 중복 값을 제거하여 가독성을 향상시키는 셀 병합과 최대의 유연성과 제어를 위한 양면 열 고정과 같은 강력한 추가 기능을 통해 더 깔끔한 데이터 표시, 최적화된 데이터 세트 및 보다 원활한 사용자 경험을 제공할 수 있습니다. 디버깅이 아닌 구축에 집중하세요.

새로운 모든 것을 한 눈에 볼 수 있습니다.

그리드 셀 병합 기능

Ignite UI for Angular 그리드는 동일한 값을 가진 두 개 이상의 인접한 셀을 하나의 더 큰 셀로 결합하는 셀 병합 기능을 제공합니다. 병합은 열 내에서 세로로 적용되며 중복 값을 줄여 가독성을 향상시키는 데 도움이 됩니다. 이 기능은 기본적으로 데이터 값과 일치하거나 사용자 지정 조건을 적용하여 셀을 병합하도록 구성할 수 있습니다.

셀 병합 기능은 다음에 사용할 수 있습니다.

양쪽 격자 기둥 핀

Ignite UI for Angular 20.1에서는 각 열 고정 위치를 개별적으로 지정할 수 있으므로 그리드의 양쪽에 열을 고정하여 더 편리하고 데이터 세트를 더 쉽게 최적화하며 Angular 애플리케이션에 대해 원하는 UX를 달성할 수 있습니다.

양쪽의 열 고정은 Angular 데이터 그리드, Angular 트리 그리드 및 Angular 계층 그리드에 사용할 수 있습니다.

Angular 그리드 성능의 한계를 넘어서다

Infragistics 에서는 항상 세계에서 가장 빠른 Angular 그리드를 제공하는 데 자부심을 갖고 있으며 이제 성능을 한 단계 끌어올리고 있습니다. 지난 몇 번의 스프린트 동안 개발 팀은 Angular 구성 요소 라이브러리인 데이터 그리드, 트리 그리드 및 계층적 그리드의 핵심을 최적화하는 데 중점을 두었습니다.

그 어느 때보다 빠름: 최적화된 분류 파이프라인

Ignite UI for Angular 20.1에서 릴리스될 첫 번째 중요한 개선 사항은 정렬 파이프라인의 포괄적인 최적화입니다. 대규모 데이터 세트를 처리하는 애플리케이션의 경우 매 밀리초가 중요하다는 것을 알고 있습니다. 우리의 초기 수락 기준은 그룹화 성능을 벤치마킹하고 10,000개 이상의 행이 있는 데이터 세트에 대해 실행 시간이 최소 25% 향상되었음을 입증하는 야심찬 것이었습니다.

결과는? 우리는 그 벤치마크를 뛰어넘어 다음을 달성했습니다.

• 100,000개의 레코드가 있는 데이터 세트에 대해 3배에서 4배 더 빠르게 정렬합니다.
• 전체 데이터 작업 시간은 100K 행의 애플리케이션 시나리오 내에서 그리드에서 ~35% 감소했습니다.

이러한 향상된 기능은 방대한 양의 데이터를 처리할 때에도 애플리케이션이 그 어느 때보다 응답성이 뛰어나고 유동적으로 느껴진다는 것을 의미합니다. 이는 지속적인 개선에 대한 개발자의 헌신과 최상의 사용자 경험을 제공하려는 열정에 대한 증거입니다.

Ignite UI for Angular 20.1의 최신 최적화는 우리의 철학을 명확하게 보여줍니다. 우리는 기능이 풍부할 뿐만 아니라 성능도 뛰어난 도구를 개발자에게 제공하기 위해 한 걸음 더 나아가는 것이 중요하다고 믿습니다. 우리는 이러한 혁신의 여정을 계속하고 Ignite UI for Angular의 향상된 성능으로 구축하게 될 놀라운 애플리케이션을 보게 되어 기쁩니다.

​Angular 20 과의 호환성

6월 9일에 Ignite UI for Angular 20.0.0으로 출시되었습니다.

Ignite UI for Angular 20.1.0에 대한 전체 변경 로그

새로운 기능

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • 동일한 데이터 또는 기타 사용자 지정 조건을 기반으로 열의 셀을 단일 셀로 구성하고 병합할 수 있는 새로운 셀 병합 기능이 도입되었습니다. 개별 열에서 활성화할 수 있습니다.<igx-column field="field" [merge]="true"></igx-column> 병합은 그리드 수준에서 다음 중 하나를 적용하도록 구성할 수 있습니다.
    • onSort– 열이 정렬될 때만 해당됩니다.
    • always– 데이터 연산과 상관없이 항상.
    <igx-grid [cellMergeMode]="'always'"> </igx-grid>기본값cellMergeMode은 다음과onSort 같습니다. 이 기능은 커스텀 시나리오에 다른 병합 조건이나 로직이 필요할 경우를 대비해 그리드에 커스텀mergeStrategy을 설정하여 수정할 수 있습니다. 특정 데이터 필드에 대해 맞춤 처리가 필요할 경우를 대비해 개별 열에 amergeComparer를 설정할 수도 있습니다.
  • 개별 열을 특정 면(그리드의 시작 또는 끝)에 고정할 수 있는 기능이 추가되어 양쪽 모두에서 고정할 수 있게 되었습니다. 이는 선언적으로 열 속성 설정pinningPosition으로 할 수 있습니다: <igx-column [field]="'Col1′" [pinned]='true' [pinningPosition]='pinningPosition'> </igx-column>public pinningPosition = ColumnPinningPosition.End; 또는 API를 통해 선택적 parameter:grid.pinColumn('Col1', 0, ColumnPinningPosition.End)를 통해 사용할 수도 있습니다. grid.pinColumn('Col2', 0, ColumnPinningPosition.Start); 속성pinningPosition이 열에 설정되어 있지 않으면, 열은 그리드의pinning 옵션columns에 표시된 위치로 기본값이 됩니다.
• IgxCarousel
  • 메서드 오버로드 허용 인덱스가 추가select 되었습니다.
  this.carousel.select(2, Direction.NEXT);
• IgxDateRangePicker
  • 이제 달력을 사용자 정의할 수 있는 완전한 속성 세트가 있습니다.
    • headerOrientation
    • orientation
    • hideHeader
    • activeDate
    • disabledDates
    • specialDates
  • 또한 다음 템플릿들도 있으며, 모드에서dialog 달력 헤더의 내용을 커스터마이즈할 수 있습니다:
    • igxCalendarHeader
    • igxCalendarHeaderTitle
    • igxCalendarSubheader
  • 새로운 속성 추가:
    • usePredefinedRanges– 내장된 사전 정의 범위를 렌더링할지 여부
    • customRanges– 사용자가 칩으로 렌더링된 맞춤형 범위를 제공할 수 있게 합니다
    • resourceStrings– 사용자가 리소스 문자열 집합을 제공할 수 있게 합니다
  • Behavioral Changes
    • 대화 상자에 취소 버튼을 추가하여 사용자가 선택을 취소할 수 있습니다.
    • 캘린더는 기본적으로 헤더 모드로dialog 표시됩니다.
    • 피커는 타이핑 중(2입력 및dropdown 모드 모두) 열려 있습니다.
    • 달력 선택이 입력된 값으로 업데이트됩니다.
    • 달력 보기는 입력된 값에 따라 업데이트됩니다.
    • 선택기는 단일 입력 모드에서 기본적으로 명확한 아이콘을 표시합니다.
  • IgxPredefinedRangesAreaComponent
    • 캘린더 내에서 미리 정의된 또는 커스텀 범위를 렌더링하는 새로운 컴포넌트를 추가했습니다.IgxDateRangePicker
• IgxDatePicker
  • 이와IgxDateRangePicker 유사하게, 기존 속성 외에 다음 속성들을 추가하여 달력을 맞춤화할 수 있는 기능도 완성합니다:
    • hideHeader
    • orientation
    • activeDate
  • Behavioral Changes
    • 달력 선택이 입력된 값으로 업데이트됩니다.
    • 달력 보기는 입력된 날짜 값에 따라 업데이트됩니다.
• IgxOverlay
  • Position Settings는 이제 타입offset의 새로운 선택적number 입력 속성을 받아들입니다. 원소와 타겟의 오프셋을 픽셀 단위로 설정하는 데 사용됩니다.
• IgxTooltip
  • 이제 도구 설명과 상호 작용하는 동안 열린 상태로 유지됩니다.
• IgxTooltipTarget
  • 툴팁 콘텐츠와 동작의 맞춤화를 강화하기 위한 여러 새로운 속성을 도입했습니다. 여기에는 다음과 같은 것들이 포함됩니다positionSettings,hasArrow,sticky.closeButtonTemplate 자세한 사용법과 예시는 툴팁 README를 참고하시기 바랍니다.

일반적인

• IgxDropDown이제 입력 속성을 공개role 하여 사용자가 사용 사례에 따라 역할 속성을 커스터마이즈할 수 있게 합니다. 기본적으로는 그렇listbox 습니다.
• IgxTooltipTarget
  • Behavioral Changes
    • 입력 속성은showDelay 이제 기본값이 됩니다200.
    • 입력 속성은hideDelay 이제 기본값이 됩니다300.
    • ​showTooltip그리고hideTooltip 방법은 고려showDelay​hideDelay 하지 않습니다.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
  • Sorting improvements
    • Schwartzian 변환을 사용하여 정렬 알고리즘 효율성을 개선했습니다. 이는 장식-정렬-장식 해제라고도 하는 기술로, 정렬 키를 원래 데이터 레코드와 임시로 연결하여 정렬 키를 다시 계산하지 않도록 합니다.
    • 정렬 알고리즘을 재귀에서 반복으로 리팩토링했습니다.
  • Groupby 개선 사항
    • 그룹화 알고리즘을 재귀에서 반복으로 리팩토링했습니다.
    • 최적화된 그룹화 작업.

요약하자면...

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

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

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