Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes

Question

I'm having an issue trying to get Bootstrap 4 Checkboxes working with a select all and deselect all option in angular 6+. I can get it to work when I use the original code here: http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
But the issue is Bootstrap uses a different event to click their checkboxes. Does anyone have a solution for this?

<div class="form-check">
    <input class="form-check-input" type="checkbox" (change)="selectAll()">
    <label class="form-check-label">
        Select All
      </label>
</div>
<div class="form-check" *ngFor="let n of names">
    <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()">
    <label class="form-check-label">
        {{n.name}}
      </label>
</div>

And the TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
  title = 'Checkbox';
  names: any;
  selectedAll: any;
  constructor() {
    this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]

  }
  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

  ngOnInit() {
  }
}

Answer 1

this should do it

Here is a plnkr: https://next.plnkr.co/edit/ypGmwE32Xn1bgbqd?preview

HTML:

<div class="form-check">
    <input class="form-check-input" type="checkbox" (change)="selectAll()" [checked]="selectedAll">
    <label class="form-check-label">
        Select All
      </label>
</div>
<div class="form-check" *ngFor="let n of names">
    <input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="n.selected" (change)="checkIfAllSelected()">
    <label class="form-check-label">
        {{n.name}}
      </label>
</div>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {


    title = 'Checkbox';
  names: any;
  selectedAll: any;
  selectedNames: any;
    constructor() {
          this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]
    }
    selectAll() {
        this.selectedAll = !this.selectedAll;

        for (var i = 0; i < this.names.length; i++) {
            this.names[i].selected = this.selectedAll;
        } 
  }
  checkIfAllSelected() {
      var totalSelected =  0;
      for (var i = 0; i < this.names.length; i++) {
            if(this.names[i].selected) totalSelected++;
        } 
    this.selectedAll = totalSelected === this.names.length;

  return true;
  }

  ngOnInit() {
  }
}