Angular Tree 컴포넌트 개요

Angular Tree Component를 사용하면 부모-자식 관계가 있는 트리 뷰 구조로 계층적 데이터를 나타낼 수 있을 뿐만 아니라 해당 데이터 모델 없이 정적 트리-뷰 구조를 정의할 수 있습니다. 주요 목적은 최종 사용자가 계층적 데이터 구조 내에서 시각화하고 탐색할 수 있도록 하는 것입니다. 또한 Ignite UI for Angular Tree Component는 필요에 따른 로드 기능, 항목 활성화, 기본 제공 확인란, 기본 제공 키보드 탐색 등을 통한 항목의 이중 상태 및 트라이 상태 계단식 선택을 제공합니다.

Angular Tree Example

이 기본 Angular 트리 예시에서는 노드 계층 구조를 지정하고 계층 데이터 세트를 반복하여 노드igx-tree와 노드를 정의하는 방법을 볼 수 있습니다.

Getting Started with Ignite UI for Angular Tree

Ignite UI for Angular 트리 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 app.module 파일로 가져오IgxTreeModule는 것입니다.

// app.module.ts

...
import { IgxTreeModule } from 'igniteui-angular/tree';
// import { IgxTreeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxTreeModule],
    ...
})
export class AppModule {}

또는16.0.0 독립 실행형 의존성으로 가져오IgxTreeComponent 거나, 토큰을IGX_TREE_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// home.component.ts

import { IGX_TREE_DIRECTIVES } from 'igniteui-angular/tree';
// import { IGX_TREE_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-tree>
        <igx-tree-node>
            Angular Libraries
            <igx-tree-node>Ignite UI for Angular</igx-tree-node>
            <igx-tree-node>Angular Material</igx-tree-node>
        </igx-tree-node>
        <igx-tree-node>
            Web Component Libraries
            <igx-tree-node>Ignite UI for Web Components</igx-tree-node>
            <igx-tree-node>Open UI 5</igx-tree-node>
        </igx-tree-node>
        <igx-tree-node>
            Blazor Libraries
            <igx-tree-node>Ignite UI for Blazor</igx-tree-node>
        </igx-tree-node>
    </igx-tree>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TREE_DIRECTIVES]
    /* or imports: [IgxTreeComponent, IgxTreeNodeComponent] */
})
export class HomeComponent {}

이제 Ignite UI for Angular 트리 모듈이나 지시어를 가져왔으니, 이제 와igx-tree 그 노드들의 기본 구성을 시작하겠습니다.

Using the Angular Tree

IgxTreeNodesComponent는 다음 에 속하는 모든 노드의 표현이다. IgxTreeComponent.
노드는 다음을 제공합니다 장애, 활성, 선정 그리고 확장됨 속성 을 통해 요구에 맞게 노드 상태를 구성할 수 있습니다. 데이터 속성은 노드가 나타내는 데이터 입력에 대한 참조를 추가하는 데 사용할 수 있습니다. 제본법[data] 노드를 탐색하는 데 필요합니다. IgxTreeComponent.findNodes().

Declaring a tree

노드는 다음 방법 중 하나를 사용하여 선언할 수 있습니다.

노드 계층 구조를 지정하고 데이터 세트를 반복하여 트리와 해당 노드 선언

<igx-tree>
 <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpaded(node)" [selected]="isNodeSelected(node)">
  {{ node.text }}
  <img [src]="node.image" [alt]="node.imageAlt" />
  <igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpaded(child)" [selected]="isNodeSelected(child)">
            {{ child.text }}
  </igx-tree-node>
 </igx-tree-node>
</igx-tree>

노드의 확장 및 선택 상태가 기본 데이터에도 반영되도록 노드를 데이터 모델에 바인딩할 수 있습니다.

<igx-tree (nodeSelection)="handleSelectionEvent($event)">
 <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded" [(selected)]="node.selected">
  {{ node.text }}
  <img [src]="node.image" [alt]="node.imageAlt" />
  <igx-tree-node *ngFor="let child of node.children" [data]="child">
   <a igxTreeNodeLink [href]="child.url" target="_blank">
                {{ child.text }}
            </a>
  </igx-tree-node>
 </igx-tree-node>
</igx-tree>

바인딩되지 않은 정적 노드를 생성하여 트리 선언

트리를 렌더링하기 위해 반드시 데이터 세트가 필요한 것은 아닙니다. 기본 데이터 모델 없이 개별 노드를 만들 수 있습니다.

<igx-tree>
 <igx-tree-node [expanded]="true" [selected]="false">
  I am a parent node 1
  <img src="hard_coded_src.webb" alt="Alt Text" />  
  <igx-tree-node [expanded]="true" [selected]="false">
   I am a child node 1
   <igx-tree-node>
    <a igxTreeNodeLink href="https://google.com" target="_blank">
        I am a child node of the child
    </a>
   </igx-tree-node>
  </igx-tree-node>
 </igx-tree-node>

 <igx-tree-node [expanded]="false" [selected]="false">
  I am a parent node 2
  <img src="hard_coded_src.webb" alt="Alt Text" />
        <igx-tree-node [expanded]="false" [selected]="false">
   I am a child node 1
  </igx-tree-node>
 </igx-tree-node>

    <igx-tree-node [selected]="false" [disabled]="true">
  I am a parent node 3
 </igx-tree-node>
</igx-tree>

Nodes with links

노드가 링크를 렌더링해야 할 때, 지시문이IgxTreeNodeLink 태그에<a> 추가되어야 합니다. 이렇게 하면 노드의 DOM 요소에 적절한 아리아 역할이 할당됩니다.

<igx-tree>
 <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpaded(node)" [selected]="isNodeSelected(node)">
  {{ node.text }}
  <img [src]="node.image" [alt]="node.imageAlt" />
  <igx-tree-node *ngFor="let child of node.children" [data]="child">
            <a igxTreeNodeLink [href]="child.url" target="_blank">
                {{ child.text }}
            </a>
  </igx-tree-node>
 </igx-tree-node>
</igx-tree>

Node Interactions

IgxTreeNodeComponent는 확장되거나 축소될 수 있습니다.

노드를 클릭하면 확장 표시기(기본 동작)(Expand Indicator(Default Behavior))가 나타납니다.
노드를 클릭하면igx-tree toggleNodeOnClick 속성이true.

<igx-tree [toggleNodeOnClick]="true">
 <igx-tree-node *ngFor="let node of data" [data]="node">
  {{ node.text }}
  <igx-tree-node *ngFor="let child of node.children" [data]="child">
                {{ child.text }}
  </igx-tree-node>
 </igx-tree-node>
</igx-tree>

기본적으로 여러 노드를 동시에 확장할 수 있습니다. 이 동작을 변경하고 한 번에 하나의 분기만 확장할 수 있도록 하려면 singleBranchExpand 속성을 사용하도록 설정할 수 있습니다. 이렇게 하면 노드가 확장될 때 동일한 수준에서 이미 확장된 다른 모든 분기가 축소됩니다.

<igx-tree [singleBranchExpand]="true">
 <igx-tree-node *ngFor="let node of data" [data]="node">
  {{ node.text }}
  <igx-tree-node *ngFor="let child of node.children" [data]="child">
                {{ child.text }}
  </igx-tree-node>
 </igx-tree-node>
</igx-tree>

또한 IgxTree는 노드 상호 작용을 위해 다음과 같은 API 메소드를 제공합니다.

확장- 애니메이션으로 노드를 확장합니다.
Collapse- 애니메이션으로 노드를 축소합니다.
토글- 애니메이션으로 노드 확장 상태를 토글합니다.
CollapseAll- 애니메이션으로 지정된 노드를 축소합니다. 노드가 전달되지 않으면 모든 상위 노드가 축소됩니다.
ExpandAll- 지정된 노드를 애니메이션으로 확장되도록 설정합니다. 전달된 노드가 없으면 모든 상위 노드를 확장합니다.
deselectAll- 모든 노드를 선택 취소합니다. 노드 배열이 전달되면 지정된 노드만 선택 취소됩니다. nodeSelection 이벤트를 발생시키지 않습니다.

Finding Nodes

findNodes 메소드를 사용하여 IgxTree 내에서 특정 노드를 찾을 수 있습니다. 지정된 데이터와 일치하는 노드 배열을 반환합니다. 복합 기본 키와 같이 더 복잡한 데이터 구조 시나리오에서 노드를 찾을 때 데이터를 기반으로 노드를 찾는 기준을 지정하기 위해 사용자 지정 비교자 함수를 전달할 수 있습니다.

<igx-tree>
 <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpaded(node)" [selected]="isNodeSelected(node)">
  {{ node.text }}
  <img [src]="node.image" alt="node.imageAlt" />
  <igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpaded(child)" [selected]="isNodeSelected(child)">
            {{ child.text }}
  </igx-tree-node>
 </igx-tree-node>
</igx-tree>

export class MyTreeViewComponent {
  public data: { [key: string]: any, valueKey: string } = MY_DATA;
  @ViewChild(IgxTreeComponent, { read: IgxTreeComponent })
  public tree;

  findNode(valueKey: string) {
    const comparer: IgxTreeSearchResolver =
      (data: any, node: IgxTreeNodeComponent) => node.data.valueKey === data;
    const matchingNodes: IgxTreeNode<{ [key: string]: any, valueKey: string }>[] = this.tree.findNodes(valueKey, comparer);
  }
}

Templating

노드에 대한 재사용 템플릿을 만들려면 선언하세요<ng-template> 내면igx-tree.

<igx-tree>
    <igx-tree-node *ngFor="let node of data" [data]="node">
        <ng-container *ngTemplateOutlet="#nodeTemplate; context: { $implicit: node }"></ng-container>
        <igx-tree-node *ngFor="let child of node.ChildCompanies" [data]="child">
            <ng-container *ngTemplateOutlet="#nodeTemplate; context: { $implicit: child}"></ng-container>
        </igx-tree-node>
    </igx-tree-node>
    <ng-template #nodeTemplate let-data>
        <div class="node-header company">
            <igx-icon class="company__logo">{{ data.Logo }}</igx-icon>
            <div class="company__name">{{ data.CompanyName }}</div>
        </div>
    </ng-template>
</igx-tree>

또한, ExpandIndicator 입력을 사용하면 노드의 확장/축소 표시기를 렌더링하는 데 사용할 사용자 정의 템플릿을 설정할 수 있습니다.

<igx-tree>
    <igx-tree-node *ngFor="let node of data" [data]="node">
    </igx-tree-node>
    <ng-template igxTreeExpandIndicator let-expanded>
        <igx-icon>{{ expanded ? 'expand_less' : 'expand_more' }}</igx-icon>
    </ng-template>
</igx-tree>

Angular Tree Selection

노드 선택igx-tree을 설정하려면 선택 속성을 설정하기만 하면 됩니다. 이 특성은 None, BiState, Cascading의 세 가지 모드를 수용합니다. 아래에서 각 항목을 좀 더 자세히 살펴보겠습니다.

None

igx-tree기본적으로 노드 선택이 비활성화되어 있습니다. 사용자는 UI 상호작용을 통해 노드를 선택하거나 해제할 수 없지만, 제공된 API 메서드를 통해 이러한 동작을 수행할 수 있습니다.

Bi-State

바이스테이트 노드 선택igx-tree을 활성화하려면 선택 속성을 BiState로 설정하세요. 이렇게 하면 모든 노드에 체크박스가 생성됩니다. 각 노드는 두 가지 상태를 가집니다 - 선택된 상태와 그렇지 않은 상태입니다. 이 모드는 다중 선택을 지원합니다.

<igx-tree selection="BiState">
</igx-tree>

Cascading

계단식 노드 선택igx-tree을 활성화하려면 선택 속성을 계단 모드로 설정하세요. 이렇게 하면 모든 노드에 체크박스가 생성됩니다.

<igx-tree selection="Cascading">
</igx-tree>

이 모드에서 부모의 선택 상태는 전적으로 자식의 선택 상태에 따라 달라집니다. 부모에 선택된 자식과 선택 취소된 자식이 있는 경우 해당 확인란은 확정되지 않은 상태입니다.

Angular Tree Checkbox

Angular Tree 구성 요소는 체크박스에 대한 기본 제공 지원을 제공하여 사용자가 두 개 이상의 항목을 선택할 수 있도록 합니다.

TreeView 확인란에는 부분적으로 선택된 상위 노드에만 적용할 수 있는 3상태 모드도 있습니다. 이 모드에서는 하위 노드 전체가 아닌 일부가 검사될 때 상위 노드가 불확정 상태로 전환됩니다.

IgxTree의 키보드 탐색은 사용자에게 다양한 키보드 상호 작용을 제공합니다. 이 기능은 기본적으로 활성화되어 있으며 사용자가 노드를 탐색할 수 있도록 합니다.

IgxTree 탐색은 W3C 접근성 표준을 준수하며 사용하기 편리합니다.

주요 조합

아래쪽 화살표- 표시되는 다음 노드로 이동합니다. 노드를 활성으로 표시합니다. 마지막 노드에 있는 경우 아무 작업도 수행하지 않습니다.
Ctrl + 아래쪽 화살표- 표시되는 다음 노드로 이동합니다. 마지막 노드에 있는 경우 아무 작업도 수행하지 않습니다.
위쪽 화살표- 이전에 표시되는 노드로 이동합니다. 노드를 활성으로 표시합니다. FIRST 노드에 있는 경우 아무 작업도 수행하지 않습니다.
Ctrl + 위쪽 화살표- 표시된 이전 노드로 이동합니다. FIRST 노드에 있는 경우 아무 작업도 수행하지 않습니다.
왼쪽 화살표- 확장된 상위 노드에서 이를 축소합니다. 하위 노드에 있는 경우 해당 상위 노드로 이동합니다.
오른쪽 화살표- 확장된 상위 노드에서 노드의 첫 번째 하위로 이동합니다. 접힌 상위 노드에 있는 경우 확장합니다.
홈- FIRST 노드로 이동합니다.
끝- 마지막으로 표시되는 노드로 이동합니다.
탭- 트리 외부의 페이지에서 포커스를 받을 수 있는 다음 요소로 이동합니다.
Shift + Tab- 트리 외부의 페이지에서 초점을 맞출 수 있는 이전 요소로 이동합니다.
Space- 현재 노드 선택을 전환합니다. 노드를 활성으로 표시합니다.
Shift + 스페이스- 선택이 활성화된 경우 Shift를 누른 상태에서 활성 노드와 스페이스를 누른 노드 사이의 모든 노드 선택을 전환합니다.
Enter- 집중된 노드를 활성화합니다. 노드에 링크가 있으면 링크를 엽니다.
*- 노드와 같은 수준의 모든 형제 노드를 확장합니다.

선택이 활성화되면 최종 사용자의 노드 선택은 렌더링된 확인란을 통해서만 허용됩니다. 두 선택 유형 모두 다중 선택을 허용하므로 다음과 같은 마우스 + 키보드 상호 작용을 사용할 수 있습니다.

클릭- 노드 확인란에서 수행할 때 선택이 활성화된 경우 노드 선택을 전환합니다. 그렇지 않으면 노드에 초점을 맞춥니다.
Shift + 클릭- 노드 확인란에서 수행되면 활성 노드와 선택이 활성화된 경우 Shift를 누른 상태에서 클릭한 노드 사이의 모든 노드 선택을 전환합니다.

Angular Tree Load On Demand

Ignite UI for Angular IgxTree는 사용자가 가능한 한 빨리 볼 수 있도록 서버에서 최소한의 데이터를 검색해야 하는 방식으로 렌더링할 수 있습니다. 이 동적 데이터 로드 방법을 사용하면 사용자가 노드를 확장한 후에만 해당 특정 부모 노드의 자식이 검색됩니다. Load on Demand라고도 하는 이 메커니즘은 모든 원격 데이터와 함께 작동하도록 쉽게 구성할 수 있습니다.

Demo

사용자가 확장 아이콘을 클릭하면 로딩 표시기로 대체됩니다. 로딩 속성이 로false 해결되면 로딩 표시기가 사라지고 자식들이 로드됩니다.

스타일링

Tree Theme Property Map

기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

기본 속성	종속 속성	설명
$background	$foreground	트리 노드 내용에 사용되는 색상입니다.
	$background 선정	선택한 트리 노드에 사용된 배경색입니다.
	$hover색	나무 노드가 떠 있을 때 사용하는 배경색입니다.
	$background 활성	활성 트리 노드에 사용된 배경색입니다.
	$background 장애인	비활성화 상태의 트리 노드에 사용되는 배경색입니다.
$background 선정	$foreground 선정	선택한 트리 노드의 내용에 사용되는 색상입니다.
	$hover-선택-컬러	마우스를 올릴 때 선택한 트리 노드에 사용된 배경색입니다.
$background 활성	$foreground 활성	활성 트리 노드의 내용에 사용되는 색상입니다.
	$background-활성화-선택됨	활성 선택 트리 노드에 사용되는 배경색입니다.
$background-활성화-선택됨	$foreground-활동-선택-	활성 선택 트리 노드의 내용에 사용되는 색상입니다.
$background 장애인	$foreground 장애인	비활성화된 트리 노드의 콘텐츠에 사용되는 색상입니다.

Ignite UI for Angular 테마를 사용하면 나무의 외관을 크게 변경할 수 있습니다. 먼저, 테마 엔진에서 제공하는 기능을 사용하려면 스타일 파일에 파일을 가져와index야 합니다:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 방법을 따라, 트리 테마를 확장하고 매개변수만$background 제공하는 새로운 테마를 만듭니다. 테마는 다른 필요한 색상들을 자동으로 계산하며, 물론 다른 속성들은 무시할 수 있습니다:

$custom-tree-theme: tree-theme(
  $background: #ecaa53,
);

마지막 단계는 구성 요소의 테마를 포함하는 것입니다.

@include css-vars($custom-tree-theme);

Demo

Styling with Tailwind

저희의 맞춤형 Tailwind 유틸리티 클래스를 사용해 트리를 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

글로벌 스타일시트에서 Tailwind 가져오기와 함께, 원하는 테마 유틸리티를 다음과 같이 적용할 수 있습니다:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

라이트 테마에는 클래스를 사용light-* 하세요.
어두운 테마에는 클래스를 사용dark-* 하세요.
접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-treedark-tree 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 생성된 CSS 변수를 다음arbitrary properties으로 덮어쓸 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 부동산 목록은 IgxTree 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-tree class="tree-root">
    @for (type of data; track type) {
      <igx-tree-node class="!light-tree ![--background:#81B698]">
        {{ type.Name }}
        @for (value of type.Children; track value) {
          <igx-tree-node class="!light-tree ![--background:#81B698]">
            {{ value.Name }}
          </igx-tree-node>
        }
      </igx-tree-node>
    }
</igx-tree>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에는 트리가 이렇게 보여야 합니다:

Known Issues and Limitations

한정	설명
재귀 템플릿 노드	그만큼`igx-tree` 템플릿을 통해 igx-tree-nodes를 반복적으로 생성하는 것을 지원하지 않습니다. 자세히 알아보기 모든 노드는 수동으로 선언해야 합니다. 즉, 매우 깊은 계층 구조를 시각화하려는 경우 템플릿 파일 크기에 영향을 미칠 수 있습니다. 트리는 주로 레이아웃/탐색 구성 요소로 사용되도록 만들어졌습니다. 다양한 수준의 깊이와 동질적인 데이터가 있는 계층적 데이터 소스를 시각화해야 하는 경우 IgxTreeGrid를 사용할 수 있습니다.
이전 View Engine(Ivy 이전)에서 IgxTreeNodes 사용	Angular의 View Engine(Ivy 이전)에는 트리를 사용할 수 없게 하는 문제가 있습니다.`enableIvy: false` tsconfig.json에 설정되어 있습니다
FireFox의 탭 탐색	트리에 스크롤 막대가 있는 경우 키보드 탐색을 통해 트리를 탭하면 먼저 igx-tree-node 요소에 초점이 맞춰집니다. 이는 FireFox의 기본 동작이지만 명시적인 명령을 입력하여 해결할 수 있습니다.`tabIndex = -1` 나무에.

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular Tree 컴포넌트 개요

Angular Tree Example

Getting Started with Ignite UI for Angular Tree

Using the Angular Tree

Declaring a tree

Nodes with links

Node Interactions

Finding Nodes

Templating

Angular Tree Selection

None

Bi-State

Cascading

Angular Tree Checkbox

Keyboard Navigation

Angular Tree Load On Demand

Demo

스타일링

Tree Theme Property Map

Demo

Styling with Tailwind

Note

Known Issues and Limitations

API References

Additional Resources

테마