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 – always, regardless of data operations.
    <igx-grid [cellMergeMode]="'항상'"> </igx-grid>기본값 cellMergeMode은 입니다 onSort. 사용자 지정 시나리오에 다른 병합 조건 또는 논리가 필요한 경우 그리드에 사용자 지정 mergeStrategy을 설정하여 기능을 수정할 수 있습니다. 특정 데이터 필드에 대해 일부 사용자 지정 처리가 필요한 경우 개별 열에 a mergeComparer를 설정할 수도 있습니다.
  • 개별 열을 특정 면(그리드의 시작 또는 끝)에 고정하는 기능이 추가되어 이제 양쪽에서 고정할 수 있습니다. 이것은 열에 속성을 설정 pinningPosition 하여 선언적으로 수행할 수 있습니다.<igx-column [field]="'Col1'" [pinned]='true' [pinningPosition]='pinningPosition'> </igx-column>public pinningPosition = ColumnPinningPosition.End; 또는 선택적 매개변수를 통해 API를 사용합니다.grid.pinColumn('Col1', 0, ColumnPinningPosition.End); grid.pinColumn('Col2', 0, ColumnPinningPosition.Start); 열에 속성 pinningPosition이 설정되지 않은 경우 열은 기본적으로 그리드 옵션에 pinning 지정된 위치로 설정됩니다. columns​
• IgxCarousel
  • Added select method overload accepting index.
  this.carousel.select(2, Direction.NEXT);
• IgxDateRangePicker
  • 이제 달력을 사용자 정의할 수 있는 완전한 속성 세트가 있습니다.
    • headerOrientation
    • orientation
    • hideHeader
    • activeDate
    • disabledDates
    • specialDates
  • 모드에서 달력 헤더 dialog의 내용을 사용자 정의하는 데 사용할 수 있는 다음 템플릿도 있습니다.
    • igxCalendarHeader
    • igxCalendarHeaderTitle
    • igxCalendarSubheader
  • 새로운 속성 추가:
    • usePredefinedRanges – Whether to render built-in predefined ranges
    • customRanges– 사용자가 칩으로 렌더링된 사용자 정의 범위를 제공할 수 있습니다.
    • resourceStrings– 사용자가 리소스 문자열 집합을 제공할 수 있습니다.
  • Behavioral Changes
    • 대화 상자에 취소 버튼을 추가하여 사용자가 선택을 취소할 수 있습니다.
    • 달력은 기본적으로 헤더 모드로 dialog 표시됩니다.
    • 입력할 때 선택기가 열린 상태로 유지됩니다(2입력 및 dropdown 모드에서).
    • 달력 선택이 입력된 값으로 업데이트됩니다.
    • 달력 보기는 입력된 값에 따라 업데이트됩니다.
    • 선택기는 단일 입력 모드에서 기본적으로 명확한 아이콘을 표시합니다.
  • IgxPredefinedRangesAreaComponent
    • 달력 내에서 미리 정의된 범위 또는 사용자 정의 범위를 렌더링하기 위한 새 구성 요소가 추가되었습니다. IgxDateRangePicker
• IgxDatePicker
  • 와 IgxDateRangePicker 유사하게, 기존 속성 외에 다음 속성을 도입하여 달력을 사용자 정의하는 기능도 완성합니다.
    • hideHeader
    • orientation
    • activeDate
  • Behavioral Changes
    • 달력 선택이 입력된 값으로 업데이트됩니다.
    • 달력 보기는 입력된 날짜 값에 따라 업데이트됩니다.
• IgxOverlay
  • 이제 위치 설정에서 type number의 새로운 선택적 offset 입력 속성을 허용합니다. 대상에서 요소의 오프셋을 픽셀 단위로 설정하는 데 사용됩니다.
• IgxTooltip
  • 이제 도구 설명과 상호 작용하는 동안 열린 상태로 유지됩니다.
• IgxTooltipTarget
  • 도구 설명 콘텐츠 및 동작의 사용자 지정을 향상시키기 위해 몇 가지 새로운 속성을 도입했습니다. 여기에는 다음이 hasArrow​ ​sticky​ ​closeButtonTemplate 포함됩니다. positionSettings 자세한 사용법 및 예제는 툴팁 README를 참조하십시오.

일반적인

• IgxDropDown 이제 입력 속성을 노출 role 하여 사용자가 사용 사례에 따라 역할 속성을 사용자 지정할 수 있습니다. 기본값은 입니다 listbox.
• IgxTooltipTarget
  • Behavioral Changes
    • The showDelay input property now defaults to 200.
    • 이제 input 속성의 hideDelay 기본값은 . 300​
    • The showTooltip and hideTooltip methods do not take showDelay/hideDelay into account.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
  • Sorting improvements
    • Schwartzian 변환을 사용하여 정렬 알고리즘 효율성을 개선했습니다. 이는 장식-정렬-장식 해제라고도 하는 기술로, 정렬 키를 원래 데이터 레코드와 임시로 연결하여 정렬 키를 다시 계산하지 않도록 합니다.
    • 정렬 알고리즘을 재귀에서 반복으로 리팩토링했습니다.
  • Groupby 개선 사항
    • 그룹화 알고리즘을 재귀에서 반복으로 리팩토링했습니다.
    • 최적화된 그룹화 작업.

요약하자면...

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

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

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