Class ComboboxTreeExample

src/aria/combobox/combobox.spec.ts:1335–1474

}

@Component({
  template: `
<div>
  <input
    ngCombobox
    #combobox="ngCombobox"
    placeholder="Search..."
    [(value)]="searchString"
    [(expanded)]="popupExpanded"
    [disabled]="readonly()"
    (focusout)="onBlur()"
  />

  <ng-template ngComboboxPopup [combobox]="combobox" popupType="tree">
    <ul ngComboboxWidget ngTree #tree="ngTree" id="tree" focusMode="activedescendant" [tabIndex]="-1" selectionMode="explicit" [(value)]="value" (click)="onCommit()" (keydown.enter)="onCommit()" [activeDescendant]="tree.activeDescendant()">
      <ng-template
        [ngTemplateOutlet]="treeNodes"
        [ngTemplateOutletContext]="{nodes: nodes(), parent: tree}"
      />
    </ul>
  </ng-template>
</div>

<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"
      [(expanded)]="node.expanded"
      #treeItem="ngTreeItem"
    >
      {{ node.name }}
    </li>

    @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>
    }
  }
</ng-template>
  `,
  imports: [
    Combobox,
    ComboboxPopup,
    ComboboxWidget,
    Tree,
    TreeItem,
    TreeItemGroup,
    NgTemplateOutlet,
  ],
})