ipsos-components/src/demo-app/checkbox/nested-checklist.html

Material Design components for Angular

<h2>Tasks</h2>
<ul>
  <li *ngFor="let task of tasks">
    <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>
      <li *ngFor="let subtask of task.subtasks">
        <mat-checkbox [(ngModel)]="subtask.completed">
          {{subtask.name}}
        </mat-checkbox>
      </li>
    </ul>
  </li>
</ul>