npm install @angular/aria

import {Component} from '@angular/core';
import {Tree, TreeItem, TreeItemGroup} from '@angular/aria';

@Component({
  selector: 'app-tree-example',
  imports: [Tree, TreeItem, TreeItemGroup],
  template: `
    <ul ngTree>
      <li ngTreeItem value="documents">
        <span>Documents</span>
        <ul ngTreeItemGroup>
          <li ngTreeItem value="work">Work</li>
          <li ngTreeItem value="personal">Personal</li>
        </ul>
      </li>
      
      <li ngTreeItem value="photos">
        <span>Photos</span>
        <ul ngTreeItemGroup>
          <li ngTreeItem value="2023">2023</li>
          <li ngTreeItem value="2024">2024</li>
        </ul>
      </li>
      
      <li ngTreeItem value="downloads">Downloads</li>
    </ul>
  `
})
export class TreeExample {}

import {Component, signal} from '@angular/core';
import {Tree, TreeItem, TreeItemGroup} from '@angular/aria';

interface TreeNode {
  id: string;
  label: string;
  children?: TreeNode[];
}

@Component({
  selector: 'app-file-tree',
  imports: [Tree, TreeItem, TreeItemGroup],
  template: `
    <ul ngTree>
      @for (node of nodes; track node.id) {
        <li ngTreeItem [value]="node.id">
          <span>{{node.label}}</span>
          @if (node.children) {
            <ul ngTreeItemGroup>
              <ng-container *ngTemplateOutlet="treeTemplate; context: {$implicit: node.children}" />
            </ul>
          }
        </li>
      }
    </ul>
    
    <ng-template #treeTemplate let-items>
      @for (item of items; track item.id) {
        <li ngTreeItem [value]="item.id">
          <span>{{item.label}}</span>
          @if (item.children) {
            <ul ngTreeItemGroup>
              <ng-container *ngTemplateOutlet="treeTemplate; context: {$implicit: item.children}" />
            </ul>
          }
        </li>
      }
    </ng-template>
  `
})
export class FileTreeExample {
  nodes: TreeNode[] = [
    {
      id: 'src',
      label: 'src',
      children: [
        {
          id: 'app',
          label: 'app',
          children: [
            {id: 'app.component.ts', label: 'app.component.ts'},
            {id: 'app.component.html', label: 'app.component.html'}
          ]
        },
        {id: 'main.ts', label: 'main.ts'}
      ]
    },
    {id: 'package.json', label: 'package.json'}
  ];
}

<ul ngTree [multiselectable]="true">
  <li ngTreeItem value="item1">Item 1</li>
  <li ngTreeItem value="item2">Item 2</li>
  <li ngTreeItem value="item3">Item 3</li>
</ul>