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

기능이 풍부하고 성능이 뛰어난 Angular 응용 프로그램을 만들기 시작하는 것은 달걀 찾기 게임이 아닙니다. 당신은 단지 실행해야합니다 : 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– 이 구성 요소는 Tile Manager 내에 표시되는 개별 타일을 나타냅니다.
• IgcTileManagerComponent– 모든 타일 구성 요소를 포함하는 기본 구성 요소로, 전체 타일 레이아웃의 컨테이너 역할을 합니다.

타일 매니저의 속성

열과 행

사용자는 Tile Manager에 대한 그리드 열의 수를 정의할 수 있습니다. 이렇게 하려면 속성을 원하는 열 수로 설정 column-count 하기만 하면 됩니다.

Gap

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

최소 너비 및 높이

Tile Manager에서 열()의 최소 너비와 min-column-width 행(min-row-height)의 최소 높이를 설정하기 위한 속성입니다. gap 속성과 마찬가지로 이러한 속성의 값은 숫자 뒤에 길이 단위가 와야 합니다.

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
  • 더 이상 사용되지 않는 속성을 keyboardSupport 제거했습니다.
• IgxSlide
  • 사용 중단–tabIndex 더 이상 사용되지 않으며 향후 버전에서 제거될 예정입니다.
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • 열의 minWidth 및 maxWidth는 사용자 지정을 width 제한하여 범위를 벗어날 수 없도록 합니다.
  • SSR 모드에서 높이가 100% 또는 높이가 없는 그리드는 데이터 없이 % 크기로 서버에서 렌더링됩니다. 그리드에는 빈 그리드 템플릿 또는 로딩 표시기(isLoading이 true인 경우)가 표시됩니다.
  • SSR 모드에서 너비가 100% 또는 너비가 없는 그리드는 % 크기와 모든 열로 서버에서 렌더링됩니다.
  • ​pagingMode 이제 속성을 간단한 문자열 'local'로 설정할 수 있으며 'remote' 열거형을 GridPagingMode 가져올 필요가 없습니다.
• IgxHierarchicalGrid
  • 최상위 레코드가 연결된 자식 레코드의 속성 또는 데이터를 기반으로 동적으로 구체화될 수 있도록 하는 새로운 고급 필터링 기능을 도입했습니다.
  • 개체 컬렉션을 EntityType 전달하는 데 사용할 수 있는 새 schema 입력 속성이 추가되었습니다. 이 속성은 원격 데이터 시나리오에 필요합니다.
• IgxQueryBuilderComponent, IgxAdvancedFilteringDialogComponent
  • 계층 구조를 가진 엔터티에 대한 지원이 추가되었습니다.
• EntityType
  • 중첩된 엔터티를 만드는 데 사용할 수 있는 새로운 childEntities 선택적 속성이 도입되었습니다.

요약하자면...

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

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

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