at-checkbox [indeterminate]="true">A partially done task</mat-checkbox>
      </div>
    </section>

    <section>
      <h2>Nested checklist</h2>
      @for (task of tasks; track task) {
        <div>
          <mat-checkbox
            [(ngModel)]="task.completed"
            [checked]="allComplete(task)"
            [indeterminate]="someComplete(task.subtasks!)"
            (change)="setAllCompleted(task.subtasks!, $event.checked)"
          >
            {{ task.name }}
          </mat-checkbox>
       