What does [indeterminate] property exactly do in Angular Material components?

Question

I have used ssome of the Angular Material components and there is a property called [indeterminate] that I have serached on the web, but there is not a good explanations what exactly it does. So, could you tell me what it does in the following example?

<section class="example-section">
  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
  <mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>
</section>

<section class="example-section">
  <span class="example-list-section">
    <mat-checkbox class="example-margin"
                  [checked]="allComplete"
                  [indeterminate]="someComplete()"
                  (change)="setAll($event.checked)">
      {{task.name}}
    </mat-checkbox>
  </span>
  <span class="example-list-section">
    <ul>
      <li *ngFor="let subtask of task.subtasks">
        <mat-checkbox [(ngModel)]="subtask.completed"
                      [color]="subtask.color"
                      (ngModelChange)="updateAllComplete()">
          {{subtask.name}}
        </mat-checkbox>
      </li>
    </ul>
  </span>
</section>

Answer 1

indeterminate means that the checkbox is neither checked nor unchecked, kind of the middle.

As you can see from the docs, it looks like this:

This is often used when for example, you have a list of stuff that can be checked/unchecked, and they are grouped with a parent (eg TreeView).

The parent will be checked if all its children are checked, unchecked if all its children are unchecked and indeterminate if some of its children are checked.

The docs also have an example of that: