select all checkbox in angular

1<div style="text-align:center">
2  <h1>
3    {{ title }}!
4  </h1>
5</div>
6<div class="container">
7  <div class="text-center mt-5">
8    <div class="row">
9        <div class="col-md-6">
10            <ul class="list-group">
11                <li class="list-group-item">
12                  <input type="checkbox" [(ngModel)]="masterSelected" name="list_name" value="m1" (change)="checkUncheckAll()"/> <strong>Select/ Unselect All</strong>
13                </li>
14              </ul>
15              <ul class="list-group">
16                <li class="list-group-item" *ngFor="let item of checklist">
17                  <input type="checkbox" [(ngModel)]="item.isSelected" name="list_name" value="{{item.id}}" (change)="isAllSelected()"/>
18                  {{item.value}}
19                </li>
20              </ul>
21        </div>
22        <div class="col-md-6">
23            <code>{{checkedList}}</code>
24        </div>
25    </div>
26  </div>
27</div>Copy

1Prepared a small demo to show how this can be done using ngModel directive. Link: https://stackblitz.com/edit/angular-lxjrdh
2
3It uses Array.every to check if all are checked or not. If checked, it resets all otherwise checks all.