Angular 트리 구성요소 개요

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

Angular Tree Example

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

Getting Started with Ignite UI for Angular Tree

Ignite UI for Angular Tree 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

// app.module.ts

...
import { IgxTreeModule } from 'igniteui-angular';
// 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';
// 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

IgxTreeNodes구성 요소은 다음에 속하는 모든 노드를 나타냅니다. IgxTree구성 요소.
노드가 제공하는 것 장애가 있는, 활동적인, 선택된 그리고 퍼지는 요구 사항에 따라 노드의 상태를 구성할 수 있는 기회를 제공하는 속성입니다. 데이터 속성을 사용하여 노드가 나타내는 데이터 항목에 대한 참조를 추가할 수 있습니다. 제본 [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 요소에 적절한 aria 역할이 할당됩니다.

<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에서 계단식 노드 선택을 활성화하려면 선택 속성을 Cascading으로 설정하면 됩니다. 그러면 모든 노드에 대한 확인란이 렌더링됩니다.

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

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

Angular Tree Checkbox

Angular Tree 구성 요소는 확인란에 대한 기본 지원을 제공하므로 사용자가 두 개 이상의 항목을 선택할 수 있습니다.

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

Keyboard Navigation

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 사용자가 가능한 한 빨리 볼 수 있도록 서버에서 검색할 데이터의 양을 최소화하는 방식으로 렌더링될 수 있습니다. 이 동적 데이터 로드 접근 방식을 사용하면 사용자가 노드를 확장한 후에만 해당 특정 상위 노드의 하위 노드가 검색됩니다. 요청 시 로드라고도 하는 이 메커니즘은 모든 원격 데이터에 대해 작동하도록 쉽게 구성할 수 있습니다.

Demo

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

Angular Tree Styling

​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';

가장 간단한 접근 방식에 따라 트리 테마를 확장하고 변경하려는 매개변수를 전달하는 새 테마를 만듭니다.

$custom-tree-theme:tree-theme(
    $background-selected: #ffe6cc,
    $background-active: #ecaa53,
    $background-active-selected: #ff8c1a
);

Using CSS Variables

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

:host {
    @include css-vars($custom-tree-theme);
}

Using Theme Overrides

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수가 지원되지 않기 때문에 다른 접근 방식을 사용해야 합니다.

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
    ::ng-deep {
        @include tree($custom-tree-theme);    
    }
}

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

• IgxTree구성 요소
• IgxTreeNode구성 요소

Additional Resources

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub