Мы видели эту общую функцию в электронных письмах или всякий раз, когда мы выбираем что-либо на других платформах.

Всякий раз, когда мы устанавливаем все флажки в списке, флажок в заголовке таблицы отображается отмеченным.

Если в списке не установлен ни один флажок, флажок не установлен.

Но что, если мы выберем некоторые из списков только для того, чтобы это означало, что у нас есть список, который проверяется, и некоторые, которые не проверяются, что приводит к неопределенной ситуации.

Кроме того, для установки всех флажков или снятия всех флажков мы также можем установить флажок заголовка таблицы.

Если в данный момент он находится в неопределенном состоянии, то после щелчка он перейдет в проверенное состояние.

и если он находится в проверенном состоянии, он перейдет в непроверенное состояние.

HTML

<table class="table table-hover>
<thead>
          <tr>
            <th>
              <mat-checkbox [indeterminate]="chkBoxStatus==1" [checked]="chkBoxStatus==2"
                (change)="clrUnClrSel($event.checked)"></mat-checkbox>
            </th> <!-- this checkbox in the table header
            <th>Name</th>
          </tr>
        </thead>
<tbody *ngFor="let user of users">

  <td>
        <mat-checkbox [checked]="user.chk" (change)="chngChkBox($event, user)"></mat-checkbox>
            </td>
<td>{{user.name}}</td>
</tbody>
</table>

Здесь мы будем использовать две функции: одну функцию при щелчке флажка, которая находится внутри тела таблицы, а другую, которую мы используем, находится в заголовке таблицы.

TS-файл

//variables declaration
chkBoxStatus: number = 0;//0 means no, 1 means inderminate,2 means checked - using in the table header
selItems: number = 0;//holding how many data is selected 1,2 ,3 so I can show the selected number or I can also calculate by interating the array whose value is checked
chngChkBox(event: any, c: any) {
    c.chk = event.checked;
    let isSome = false, type = 0;
    let items = 0;
    for (let k = 0; k < this.users.length; k++) {
      if (this.users[k].chk) {
        items++;
        isSome = true;
        if (type != 1)
          type = 2
      } else
        type = 1;
    }
    this.selItems = items;
    this.chkBoxStatus = type == 2 ? 2 : isSome ? 1 : 0;
  }
clrUnClrSel(val: boolean) {
    for (let k = 0; k < this.users.length; k++) {
      this.users[k].chk = val;
    }
    if (val) {
      this.selItems = this.users.length;
      this.chkBoxStatus = 2;
    } else {
      this.selItems = 0;
      this.chkBoxStatus = 0;
    }
  }

Для отображения выбранных элементов нажмите кнопку очистки выбора, нам нужно добавить ее в HTML. Кроме того, убедитесь, что мы показываем эту строку только в том случае, если какой-либо флажок установлен для лучшего взаимодействия с пользователем, и всякий раз, когда пользователь снимает все флажки, эта строка будет удалена из dom.

Новый HTML, который нам нужно добавить для вышеуказанной функциональности

<div *ngIf="selItems>0">
{{selItems}} of {{cntnts.length}} items selected
        <div class="btn btn-primary btn-sm" (click)="clrUnClrSel(false)">Clear Selection</div>
</div>

Для реакции также, простой js или любой другой интерфейсный фреймворк мы также можем использовать ту же концепцию.

Удачного кодирования с неопределенным флажком.💗