What’s New: Ignite UI for Angular 19.2

Ignite UI for Angular 19.2 업데이트가 출시되었음을 발표하게 되어 매우 기쁘며, 웹 애플리케이션 구축 방법을 더욱 개선할 것을 약속드립니다! 두 가지 중요한 개선 사항이 포함되어 있습니다.

• Ignite UI Angular Grid major update of SSR (Server Side Rendering) and SSG (Prerendering)
• Angular Tile Manager

It will not be an egg hunt game to start creating feature-rich and high-performance Angular applications. You just need to run: npm update igniteui-angular.

업데이트를 탐색하여 무엇을 할 수 있는지 알아보겠습니다.

Ignite UI for Angular 그리드를 위한 SSR(Server Side Rendering) 및 SSG(Prerendering)

Ignite UI Angular Grid는 SSR(Server Side Rendering) 및 SSG(Prerendering)에 대한 주요 업데이트를 받았습니다. 이전 버전에서는 사용자가 수화 중에 열 및 용기의 너비가 변경되는 등 다양한 부작용을 경험할 수 있었습니다. 이는 크기를 계산해야 하는 가상화 때문이었습니다. Ignite UI for Angular 19.2에서는 그리드가 이제 모든 내부 요소를 적절한 상대 크기로 렌더링하여 원활한 클라이언트 하이드레이션 및 후속 데이터 바인딩을 허용합니다. 이러한 개선 사항을 통해 사용자는 Angular에서 SEO 및 성능이 중요한 SSG 또는 SSR을 활성화하여 더 나은 경험을 할 수 있어야 합니다.

**참고:** 데이터는 모든 그리드 크기가 픽셀 단위로 설정된 경우에만 사전 렌더링됩니다.

Angular Tile Manager 컴포넌트

​Tile Manager 컴포넌트를 사용하면 개별 타일에 콘텐츠를 표시할 수 있습니다. 이를 통해 사용자는 이러한 타일을 재정렬하고 크기를 조정하여 상호 작용할 수 있으므로 기본 설정에 따라 콘텐츠의 레이아웃과 모양을 자유롭게 사용자 지정할 수 있습니다. 이러한 유연성은 콘텐츠를 보다 개인화되고 효율적인 방식으로 보고 관리할 수 있도록 하여 사용자 환경을 향상시킵니다.

Ignite UI Tile Manager는 Angular 애플리케이션에서 사용할 수 있는 표준 웹 컴포넌트 입니다. 사용할 수 있는 두 가지 구성 요소를 제공합니다.

• IgcTileComponent – This component represents an individual tile displayed within the Tile Manager.
• IgcTileManagerComponent – This is the main component that contains all of the tile components, serving as the container for the entire tile layout.

타일 매니저의 속성

열과 행

As a user, you can define the number of grid columns for the Tile Manager. To do this, simply set the column-count property to the desired number of columns.

Gap

Gap 속성은 타일 사이의 공간을 정의합니다. 속성의gap 값은 숫자 뒤에 길이 단위(예: px, rem, em, ...)가 따라야 합니다. 이 값은 타일 사이의 가로 간격(너비)과 수직 간격(높이) 모두에 적용됩니다.

최소 너비 및 높이

는 타일 관리자에서 열min-column-width의 최소 너비()와 행min-row-height의 최소 높이()를 설정하는 속성입니다. 간극 속성과 유사하게, 이 특성들의 값은 숫자 뒤에 길이 단위가 붙어야 합니다.

Resizing

타일 관리자의 크기 조정은 세 가지 다른 크기 조정 표시기를 사용하여 타일 크기를 조정할 수 있는 기능입니다.

• Side Adorner: 열 범위를 수정하여 너비를 조정합니다.
• 아래쪽 표시기: 행 범위를 수정하여 높이를 조정합니다.
• 모서리 표시기: 너비와 높이를 동시에 조정합니다.

Reorder

드래그 앤 드롭 기능을 사용하여 Tile Manager에서 타일을 재정렬할 수 있습니다. 기본적으로 타일은 드래그할 수 없습니다. 이 기능을 활성화하려면 Tile Manager의 drag-mode 속성을 tile 또는 tile-header로 설정합니다.

• 타일 옵션을 사용하면 개별 타일의 아무 곳이나 길게 클릭하여 드래그를 시작할 수 있습니다.
• tile-header 옵션을 사용하면 타일의 헤더 섹션을 길게 클릭하여 드래그 프로세스를 시작할 수 있습니다.

Serialization

Web Components Tile Manager는 타일 레이아웃을 관리하는 데 도움이 되는 메서드를 제공합니다.

• saveLayout 메소드를 사용하면 타일 관리자에 타일의 현재 배열을 저장할 수 있습니다. 모든 타일의 현재 순서, 크기 및 위치를 캡처하므로 나중에 이 정확한 구성으로 복원할 수 있습니다.
• loadLayout 메서드를 사용하면 이전에 저장된 레이아웃을 로드할 수 있습니다. 호출되면 타일의 순서, 크기 및 위치를 포함하여 레이아웃이 저장되었을 때의 정확한 상태로 타일을 복원합니다.

Styling

또한 두 가지 구성 요소인 Tile Manager와 Tile의 모양을 사용자 지정할 수 있습니다. Tile Manager는 Tile Manager의 base wrapper를 스타일링하는 데 사용할 수 있는 CSS 속성인 base를 하나만 노출합니다. Tile 구성 요소는 사용할 수 있는 여러 CSS 속성을 노출합니다.

Web Components Tile 구성 요소에는 각 타일에 대해 개별적으로 설정할 수 있는 속성이 있다는 점에 유의해야 합니다. 이러한 속성 중 일부는 다음과 같습니다.

• 이 속성은col-span 타일이 레이아웃에서 몇 개의 열을 가로질지 지정해주어, 타일의 수평 크기를 조절할 수 있게 해줍니다.
• 이 속성은row-span 타일이 수직으로 몇 행 가로질지 결정하며, 레이아웃 내에서 타일의 높이를 조절합니다.
• 속성은col-start 타일이 놓인 시작 열을 지정합니다.
• 속성은row-start 타일이 놓인 시작 행을 지정합니다.
• 이 속성은disable-fullscreen 기본 전체 화면 액션 버튼을 숨깁니다.
• 이 속성은disable-maximize 기본값인 최대 토글 액션 버튼을 숨깁니다.
• 이 속성은disable-resize 사용자가 타일을 크기를 조절하는 것을 방지합니다.

Ignite UI for Angular 19.2.0 Changelog

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

일반적인

• IgxCarousel
  • Removed deprecated property keyboardSupport.
• IgxSlide
  • Deprecation – tabIndex has been deprecated and will be removed in a future version.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • A column’s minWidth and maxWidth constrain the user-specified width so that it cannot go outside their bounds.
  • SSR 모드에서 높이가 100% 또는 높이가 없는 그리드는 데이터 없이 % 크기로 서버에서 렌더링됩니다. 그리드에는 빈 그리드 템플릿 또는 로딩 표시기(isLoading이 true인 경우)가 표시됩니다.
  • SSR 모드에서 너비가 100% 또는 너비가 없는 그리드는 % 크기와 모든 열로 서버에서 렌더링됩니다.
  • The pagingMode property can now be set as simple strings 'local' and 'remote' and does not require importing the GridPagingMode enum.
• IgxHierarchicalGrid
  • 최상위 레코드가 연결된 자식 레코드의 속성 또는 데이터를 기반으로 동적으로 구체화될 수 있도록 하는 새로운 고급 필터링 기능을 도입했습니다.
  • Added a new schema input property that can be used to pass collection of EntityType objects. This property is required for remote data scenarios.
• IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
  • 계층 구조를 가진 엔터티에 대한 지원이 추가되었습니다.
• EntityType
  • A new optional property called childEntities has been introduced that can be used to create nested entities.

요약하자면...

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

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

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