angular checkbox list select all code example

Example 1: select all checkbox in angular

Prepared a small demo to show how this can be done using ngModel directive. Link: https://stackblitz.com/edit/angular-lxjrdh

It uses Array.every to check if all are checked or not. If checked, it resets all otherwise checks all.

Example 2: checkbox to select all checkbox angular

<div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
</div>
<div class="container">
  <div class="text-center mt-5">
    <div class="row">
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item">
                  <input type="checkbox" [(ngModel)]="masterSelected" name="list_name" value="m1" (change)="checkUncheckAll()"/> <strong>Select/ Unselect All</strong>
                </li>
              </ul>
              <ul class="list-group">
                <li class="list-group-item" *ngFor="let item of checklist">
                  <input type="checkbox" [(ngModel)]="item.isSelected" name="list_name" value="{{item.id}}" (change)="isAllSelected()"/>
                  {{item.value}}
                </li>
              </ul>
        </div>
        <div class="col-md-6">
            <code>{{checkedList}}</code>
        </div>
    </div>
  </div>
</div>Copy