What’s New: Ignite UI for Angular 19.1

What’s New: Ignite UI for Angular 19.1

Ignite UI for Angular 19.1에는 쿼리 빌더 및 캐러셀 구성 요소를 비롯한 강력한 새 기능이 포함되어 있습니다. 이 릴리스 블로그 게시물에서 자세히 알아보세요.

7분 읽기

2024년 11월 Angular 19와의 호환성과 향상된 그리드 요약 기능과 함께 제공되는 Ignite UI for Angular 19.0이 출시된 후 Ignite UI for Angular 19.1이 필요한 시점입니다. 새로운 디자인과 강력한 새 기능이 함께 제공됩니다.

  • 쿼리 빌더 – 새로운 디자인, 다중 테이블 쿼리 지원, 중첩 쿼리 등.
  • 캐러셀 – 업데이트된 디자인 및 수직 방향 지원.

각 테마에 대해 더 자세히 살펴보겠습니다.

Query Builder 구성 요소 업데이트

Angular Query Builder 구성 요소는 출시된 지 얼마 되지 않았으며 개발자가 지정된 데이터 세트에 대한 복잡한 데이터 필터링 쿼리를 작성할 수 있는 풍부한 UI를 제공합니다. 환상적인 새 디자인과 몇 가지 강력한 새 기능을 받았습니다.

먼저 디자인 및 동작 변경에 대해

Quiery Builder 개요 Before vs Now

Full list of behavioral changes:

  • 표현식은 한 번의 클릭 Enter​ ​Space으로 편집 모드로 들어갑니다.
  • Query Builder 구성 요소 내에서 조건을 선택하는 것은 더 이상 지원되지 않습니다.
  • 그룹화/그룹 해제 표현식은 이제 새로 노출된 드래그 앤 드롭 기능을 통해 달성되거나 사용자는 화살표 위쪽/아래쪽 키를 사용하여 컨디션 칩의 위치를 변경할 수 있습니다.
  • 상황에 맞는 메뉴를 통해 여러 표현식을 삭제하는 것은 더 이상 지원되지 않습니다.
  • 범례가 제거됩니다.
  • title 입력이 설정되지 않으면 기본적으로 빈 문자열이 됩니다.

다음으로, 새로운 기능에 대해 설명합니다

Angular Query Builder는 이제 다중 테이블 쿼리 지원을 지원합니다.

Orders, Customers 및 Products에 대한 별도의 테이블이 있는 전자 상거래 응용 프로그램이 있는 시나리오를 상상해 보십시오. 다중 테이블 쿼리는 이러한 테이블의 데이터를 결합하여 고객 세부 정보 및 제품 정보를 포함하여 각 주문에 대한 자세한 보기를 모두 하나의 그리드 구성 요소 내에 표시할 수 있습니다. 특정 시나리오에 따라 사용자가 즉석에서 향상시킬 수 있습니다. 이렇게 하면 서로 다른 응용 프로그램 섹션 사이를 이동할 필요 없이 전체적인 보기를 제공하여 사용자 경험을 개선할 수 있습니다.

이와 관련하여 Angular Query Builder 구성 요소를 사용하면 이러한 복잡한 쿼리를 시각적으로 만들 수 있습니다. 이 구성 요소를 통해 사용자는 다른 테이블에서 필드를 선택하고, 관계를 정의하고, 조건을 설정할 수 있습니다. 그런 다음 결과 쿼리를 실행하여 결합된 데이터를 가져올 수 있으며, 이 데이터는 표시를 위해 Ignite UI Angular Grid 구성 요소에 바인딩할 수 있습니다. 이 방법을 사용하면 관계형 데이터에 대한 작업 프로세스가 간소화되고 SQL 쿼리 작성에 익숙하지 않은 사용자가 관계형 데이터에 더 쉽게 액세스할 수 있습니다.

연산자를 사용하여 IN and NOT IN 중첩된 쿼리를 만들 수 있습니다.

or NOT IN 비교 연산자를 IN 선택하면 SQL 하위 쿼리를 만들 수 있습니다. 한 쿼리를 다른 쿼리 내에 포함하여 더 복잡한 쿼리를 수행할 수 있는 강력한 도구입니다. 이제 Query Builder UI를 통해 이 작업을 수행할 수 있습니다.

angular Query Builder의 검색 값 입력을 템플릿화하는 새로운 옵션

<ng-template igxQueryBuilderSearchValue 
            let-searchValue
            let-selectedField = "selectedField" 
            let-selectedCondition = "selectedCondition"
            let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
    @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
        <input type="text" required [(ngModel)]="searchValue.value"/>
    } @else {  
        <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
    }
</ng-template>

직렬화 가능한 출력

마지막으로 출력 개체를 JSON으로 직렬화할 수 있습니다. 이러한 향상된 기능을 통해 Angular Query Builder는 그 어느 때보다 다양하고 사용자 친화적입니다.

이제 Angular Carousel 구성 요소는 탐색 버튼의 세로 방향을 지원합니다.

Ignite UI for Angular 19.1.0 Changelog

​여기에서 모든 세부 정보를 살펴보세요.

일반적인

  • IgxCarousel
    • Behavioral Changes–maximumIndicatorsCount 이제 입력 속성이 기본적으로 사용됩니다 10.
    • Deprecation–CarouselIndicatorsOrientation enum 멤버 top​ ​bottom 이며 더 이상 사용되지 않으며 향후 버전에서 제거될 예정입니다. 대신 and를 end 사용하세요 start.

새로운 기능

  • IgxBanner
    • 새로운 expanded input 속성을 도입하여 배너의 상태를 동적으로 제어할 수 있습니다. 이제 배너를 프로그래밍 방식으로 "확장됨"(표시) 또는 "축소됨"(숨김)으로 초기와 런타임에 설정할 수 있습니다. 애니메이션은 런타임 업데이트 중에 트리거됩니다 — 열린 애니메이션은 로 true 설정되면 재생 expanded 되고, 닫힘 애니메이션은 로 false 설정되면 재생됩니다. 그러나 속성이 처음 설정될 때 애니메이션이 트리거되지 않습니다.
    • 배너의 이벤트 수명 주기(opening, opened, closing, closed)는 사용자 상호 작용(예: 클릭하여 열기/닫기)을 통해서만 트리거됩니다. 속성을 사용하는 expanded 프로그래밍 방식 업데이트는 이벤트를 발생시키지 않습니다.
    • ​expanded 진행 중인 애니메이션 중에 속성이 변경되면 현재 애니메이션이 중지되고 이전 애니메이션이 중단된 위치에서 반대쪽 애니메이션이 시작됩니다. 예를 들어 열린 애니메이션(10초)이 6초에서 중단되고 expanded 설정된 false 경우 닫기 애니메이션(5초)은 3초부터 시작됩니다.
  • IgxQueryBuilder 업데이트된 모양과 새로운 기능과 함께 제공되는 새로운 디자인이 있습니다.
    • IgxQueryBuilderComponent
      • IN/NOT IN 연산자를 지정하여 중첩된 쿼리를 만드는 기능을 도입했습니다.
      • 드래그 또는 를 사용하여 Arrow Up/Down 상태 칩을 재배치할 수 있는 기능을 도입했습니다.
      • ​entities 개체를 이름과 필드 배열로 설명하는 개체 배열을 EntityType 받는 속성을 추가했습니다. fields input 속성은 더 이상 사용되지 않으며 향후 버전에서 제거될 예정입니다. 자동 마이그레이션을 사용할 수 있으며 적용됩니다 ng update.
      • 초기 선택 후 루트 수준에서 선택한 개체를 비활성화할 수 있는 속성이 추가되었습니다 disableEntityChange. 기본값은 입니다 false.
      • 루트 수준에서 fields 콤보를 비활성화하는 데 사용할 수 있는 속성을 추가했습니다 disableReturnFieldsChange. 기본값은 입니다 false.
      • the canCommit,및 commit​ ​discard public 메소드를 추가하여 사용자가 표현식 트리의 현재 상태를 저장/삭제할 수 있도록 했습니다.
      • 검색 값 입력을 템플릿화하는 옵션이 추가되었습니다. <ng-template igxQueryBuilderSearchValue let-searchValue let-selectedField = "selectedField" let-selectedCondition = "selectedCondition" let-defaultSearchValueTemplate = "defaultSearchValueTemplate"> @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){ <input type="text" required [(ngModel)]="searchValue.value"/> } @else { <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ ng-container> } </ng-template>
      • Behavioral Changes
      • 표현식은 한 번의 클릭 Enter​ ​Space으로 편집 모드로 들어갑니다.
      • 내부 IgxQueryBuilderComponent에서 조건을 선택하는 것은 더 이상 지원되지 않습니다. 그룹화/그룹 해제 표현은 이제 새로 노출된 Drag & Drop 기능을 통해 수행됩니다.
      • 상황에 맞는 메뉴를 통해 여러 표현식을 삭제하는 것은 더 이상 지원되지 않습니다.
    • IgxQueryBuilderHeaderComponent
      • Behavioral Change
      • Legend is no longer shown.
      • ​title input 속성이 설정되지 않은 경우 기본적으로 빈 문자열이 됩니다.
      • Deprecation
      • ​showLegend 및 resourceStrings input 속성은 더 이상 사용되지 않으며 향후 버전에서 제거될 예정입니다. 자동 마이그레이션을 사용할 수 있으며 적용됩니다 ng update.
  • IFilteringExpression
    • 라는 conditionName 새로운 선택적 속성이 도입되었습니다. 이것은 일반적으로 기존 condition.name과 동일합니다.
  • IFilteringOperation
    • 라는 isNestedQuery 새로운 선택적 속성이 도입되었습니다. 조건이 중첩된 쿼리 생성으로 이어지는지 여부를 나타내는 데 사용됩니다.

요약하자면...

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

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

Angular
데모 요청