@angular/aria/tree

Tree

디렉티브

중첩된 목록을 접근성이 좋고 ARIA를 준수하는 트리 구조로 변환하는 컨테이너입니다. 선택, 펼침, 키보드 탐색 등 트리의 전체 상태를 관리합니다.

API

    
      class Tree<V> implements OnDestroy {}

element

HTMLElement

호스트 엘리먼트에 대한 참조입니다.

id

InputSignal<string>

트리의 고유 식별자입니다.

orientation

InputSignal<"vertical" | "horizontal">

트리의 방향입니다.

multi

InputSignalWithTransform<boolean, unknown>

여러 항목을 선택할 수 있는지 지정합니다.

disabled

InputSignalWithTransform<boolean, unknown>

트리의 비활성화 여부입니다.

selectionMode

InputSignal<"explicit" | "follow">

트리에서 사용하는 선택 전략입니다.

explicit: 사용자가 클릭하거나 스페이스바를 누르는 등의 방법으로 항목을 명시적으로 선택합니다.
follow: 포커스를 받은 항목이 자동으로 선택됩니다.

focusMode

InputSignal<"roving" | "activedescendant">

트리에서 사용하는 포커스 전략입니다.

roving: tabindex를 사용하여 활성 항목으로 포커스를 이동합니다.
activedescendant: 포커스를 트리 컨테이너에 유지하고 aria-activedescendant로 활성 항목을 나타냅니다.

wrap

InputSignalWithTransform<boolean, unknown>

탐색을 순환할지 지정합니다.

softDisabled

InputSignalWithTransform<boolean, unknown>

비활성화된 항목이 포커스를 받을 수 있는지 지정합니다. true이면 비활성화된 항목도 포커스를 받을 수 있지만 상호작용할 수는 없습니다. false이면 탐색할 때 비활성화된 항목을 건너뜁니다.

typeaheadDelay

InputSignal<number>

입력 문자 검색이 초기화되기 전까지의 지연 시간(초)입니다.

tabIndex

InputSignalWithTransform<number | undefined, string | number | undefined>

트리의 tabindex입니다.

value

ModelSignal<V[]>

현재 선택된 항목의 값입니다.

textDirection

WritableSignal<Direction>

텍스트 방향입니다.

nav

InputSignalWithTransform<boolean, unknown>

트리가 탐색 모드인지 나타냅니다.

currentType

aria-current의 타입입니다. 탐색용 트리에서 현재 활성 항목을 나타내는 데 사용할 수 있습니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current 를 참고하세요.

activeDescendant

Signal<string | undefined>

트리의 활성 자손 ID입니다.

ngOnDestroy

void

@returnsvoid

scrollActiveItemIntoView

void

@paramoptionsScrollIntoViewOptions

@returnsvoid

설명

중첩된 목록을 접근성이 좋고 ARIA를 준수하는 트리 구조로 변환하는 컨테이너입니다. 선택, 펼침, 키보드 탐색 등 트리의 전체 상태를 관리합니다.

<ul ngTree [(value)]="selectedItems" [multi]="true">
  <ng-template
    [ngTemplateOutlet]="treeNodes"
    [ngTemplateOutletContext]="{nodes: treeData, parent: tree}"
  />
</ul>

<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
  @for (node of nodes; track node.name) {
    <li ngTreeItem [parent]="parent" [value]="node.name" [label]="node.name">
      {{ node.name }}
      @if (node.children) {
        <ul role="group">
          <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
            <ng-template
              [ngTemplateOutlet]="treeNodes"
              [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
            />
          </ng-template>
        </ul>
      }
    </li>
  }
</ng-template>