Select ion-chip tags

chips.js

constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.information = navParams.data.data;
    this.children = [{ id: 1, name: 'Ginny Weasley' }, { id: 2, name: 'Harry Potter' }, { id: 3, name: 'Ronald Weasley' }, { id: 4, name: 'Luna Lovegood' }];
    this.selectButtonText = 'SELECT ALL';
    this.tagDefaultColor = "secondary";
    this.quantity = 0.0;
    this.bottleNote = "";
    this.bottleDate = new Date().toISOString()
    this.shareWithFamily = true;
    this.bottleDefaultTime = moment().format('hh:mm a');
    this.selectedChildren = [];
  }

selectAll() {
    if (this.selectButtonText === 'SELECT ALL') {
      this.selectButtonText = 'UNSELECT ALL'
      this.tagDefaultColor = "primary";
      this.selectedChildren = [...this.children];
    } else {
      this.selectButtonText = 'SELECT ALL'
      this.tagDefaultColor = "secondary"
      this.selectedChildren = [];
    }
  }

  changeTagColor(chip, i) {
    console.log(chip.firstElementChild.innerText)
    if (chip.color === "secondary") {
      chip.color = "primary"
    } else {
      chip.color = "secondary"
    }
  }


// html part
    <button ion-button full color="primary" class="select-all-btn" (click)="selectAll()">{{selectButtonText}}


    <div class="students-tags">
      <ion-chip [id]="child.id" #chip [color]="tagDefaultColor" (click)="changeTagColor(chip, i)" *ngFor="let child of children; let i = index">
        <ion-label>{{child. name}}</ion-label>
      </ion-chip>
    </div>