Angular Tree 컴포넌트 개요

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

Angular Tree Example

In this basic Angular Tree example, you can see how to define an igx-tree and its nodes by specifying the node hierarchy and iterating through a hierarchical data set.

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에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxTreeModule in your app.module file.

// 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 {}

Now that we have the Ignite UI for Angular Tree module or directives imported, let’s get started with a basic configuration of the igx-tree and its nodes.

Using the Angular Tree

IgxTreeNodesComponent is the representation of every node that belongs to the IgxTreeComponent.
Nodes provide disabled, active, selected and expanded properties, which give you opportunity to configure the states of the node as per your requirement. data property can be used to add a reference to the data entry the node represents. Binding [data] is required for searching through nodes using 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

When a node should render a link, the IgxTreeNodeLink directive should be added to the <a> tag. This will ensure the proper aria role is assigned to the node's DOM elements.

<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))가 나타납니다.
by clicking on the node if the igx-tree toggleNodeOnClick property is set to 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

To create a reusable template for your nodes, declare <ng-template> within 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

In order to setup node selection in the igx-tree, you just need to set its selection property. This property accepts the following three modes: None, BiState and Cascading. Below we will take a look at each of them in more detail.

None

In the igx-tree by default node selection is disabled. Users cannot select or deselect a node through UI interaction, but these actions can still be completed through the provided API method.

Bi-State

To enable bi-state node selection in the igx-tree just set the selection property to BiState. This will render a checkbox for every node. Each node has two states - selected or not. This mode supports multiple selection.

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

Cascading

To enable cascading node selection in the igx-tree, just set the selection property to Cascading. This will render a checkbox for every node.

<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

After the user clicks the expand icon, it is replaced by a loading indicator. When the loading property resolves to false, the loading indicator disappears and the children are loaded.

스타일링

Tree Theme Property Map

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

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

Using the Ignite UI for Angular Theming, we can greatly alter the tree appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the index file in our style file:

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

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

Following the simplest approach, we create a new theme that extends the tree-theme and provide just the $background parameter, the theme will automatically calculate all the other necessary colors, of course you can override any of the other properties:

$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 예: .

Once applied, these classes enable dynamic theme calculations. You can then override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

전체 부동산 목록은 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

테마