title: How to handle multiple mat-slide-toggle label in angular 6?
body: <p>I'm using angular 6 and I have 4 mat-cards, each card has a status with a value of <strong>Active</strong> or <strong>Deactive</strong>. and each card has a mat-slide-toggle that change the status of the card. i want to change the <strong>Active</strong> status to <strong>Deactive</strong> when the slide-toggle changes from <strong>true</strong> to <strong>false</strong>. 
  here are the codes: </p>
  
  <p><strong>card.html</strong></p>
  
  <pre><code>&lt;mat-grid-tile *ngFor="let card of cards"&gt;
          &lt;mat-slide-toggle class="example-margin" (change)="onChange($event)" [disabled]="false" [checked]="true"  [(ngModel)]="card.status1" name="status"&gt;
            &lt;span class="status"&gt;status: {{card.status}}&lt;/span&gt;
          &lt;/mat-slide-toggle&gt;
  &lt;/mat-grid-tile&gt;
  </code></pre>
  
  <p><strong>card.ts</strong></p>
  
  <pre><code> ngOnInit() {
  this.getDispensers();
  }
  
      getDispensers() {
      this.dispenserService.getDispensers().subscribe(dispensers =&gt; {
        this.cards = dispensers;
        this.cards.forEach(item =&gt; {
          item.status1 = item.status == 'Deactive' ? false : true;
        });
      });
    }
  
  
   onChange(value) {
      console.log(value)
    }
  </code></pre>
  
  <p>I don't know how should I change the status. now I just see true and false in card.status</p>