nested-checklist.html

<h2>Tasks</h2>
<ul>
  @for (task of tasks; track task) {
    <li>
      <mat-checkbox
        [(ngModel)]="task.completed"
        [checked]="allComplete(task)"
        [indeterminate]="someComplete(task.subtasks)"
        (change)="setAllCompleted(task.subtasks, $event.checked)">
        <h3>{{task.name}}</h3>
      </mat-checkbox>
      <ul>
        @for (subtask of task.subtasks; track subtask) {
          <li>
            <mat-checkbox [(ngModel)]="subtask.completed">
              {{subtask.name}}
            </mat-checkbox>
          </li>
        }
      </ul>
    </li>
  }
</ul>