在垫状滑动切换按钮处于打开状态时为其添加Angular 7芯片

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