Adding Angular 7 chips for mat-slide-toggle buttons when they are On state

Question

On toggle of starter chip should be added to simocode li

<mat-tab label="Device" >
        <ul>
            <mat-slide-toggle (change)="onChange($event)" >
            <!--li for chips-->
            <li>Simocode</li>
            </mat- `enter code here`
            slide-toggle>
            <mat-slide-toggle>
                <li>starter</li>
            </mat-slide-toggle>
        </ul>
    </mat-tab>

Answer 1

The case is on toggle active you need to add the chip with text 'Starter' and on toggle inactive you need to remove the chip.

Here is the code for template

  <mat-slide-toggle (change)="onToggle($event)"> Starter </mat-slide-toggle>
  <mat-chip-list>
    <mat-chip *ngFor="let chip of chips">{{chip}}</mat-chip>
  </mat-chip-list>

And in your component.

export class AppComponent {
  chips: any = [];

  onToggle(event) {
    let { checked } = event;
    const text = event.source._elementRef.nativeElement.innerText;
    if(checked) {
      this.chips.push(text);
    } else {
      let index = this.chips.indexOf(text);
      this.chips = this.chips.slice(1, index);
    }
  }
}

Here's the stackblitz example