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:

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

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

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

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

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

Allows for the creation of nested queries using IN and NOT IN operators

Selecting the IN or NOT IN comparison operators enables you to create SQL subqueries. They are a powerful tool that allows you to perform more complex queries by embedding one query within another. This can now be achieved through the 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 – the maximumIndicatorsCount input property now defaults to 10.
    • Deprecation – CarouselIndicatorsOrientation enum members top and bottom have been deprecated and will be removed in a future version. Use start and end instead.

새로운 기능

  • IgxBanner
    • Introduced a new expanded input property, enabling dynamic control over the banner’s state. The banner can now be programmatically set to “expanded” (visible) or “collapsed” (hidden) both initially and at runtime. Animations will trigger during runtime updates — the open animation plays when expanded is set to true, and the close animation plays when set to false. However, no animations will trigger when the property is set initially.
    • The banner’s event lifecycle (opening, opened, closing, closed) only triggers through user interactions (e.g., clicking to open/close). Programmatic updates using the expanded property will not fire any events.
    • If the expanded property changes during an ongoing animation, the current animation will stop, and the opposite animation will begin from where the previous animation left off. For instance, if the open animation (10 seconds) is interrupted at 6 seconds and expanded is set to false, the close animation (5 seconds) will start from its 3rd second.
  • IgxQueryBuilder has a new design that comes with an updated appearance and new functionality
    • IgxQueryBuilderComponent
      • IN/NOT IN 연산자를 지정하여 중첩된 쿼리를 만드는 기능을 도입했습니다.
      • Introduced the ability to reposition condition chips by dragging or using Arrow Up/Down.
      • Added the entities property that accepts an array of EntityType objects describing an entity with its name and an array of fields. The fields input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
      • Added disableEntityChange property that can disable the entity selected on a root level after the initial selection. Defaults to false.
      • Added disableReturnFieldsChange property that can be used to disable the fields combo on a root level. Defaults to false.
      • Added the canCommit, commit and discard public methods, allowing the user to save/discard the current state of the expression tree.
      • Added option to template the search value input:<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
      • Expression enters edit mode on a single click, Enter or Space.
      • Selecting conditions inside the IgxQueryBuilderComponent is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
      • 상황에 맞는 메뉴를 통해 여러 표현식을 삭제하는 것은 더 이상 지원되지 않습니다.
    • IgxQueryBuilderHeaderComponent
      • Behavioral Change
      • Legend is no longer shown.
      • If the title input property is not set, by default it would be empty string.
      • Deprecation
      • The showLegend and resourceStrings input properties have been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
  • IFilteringExpression
    • A new optional property called conditionName has been introduced. This would generally be equal to the existing condition.name.
  • IFilteringOperation
    • A new optional property called isNestedQuery has been introduced. It’s used to indicate whether the condition leads to a nested query creation.

요약하자면...

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

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

Angular
데모 요청