title: Databinding to mat-slide-toggle value inside of an *ngFor
body: <p>At the moment I have created a form that allows the user to create a layer (it will be just a name for an eventual leaflet layer). Whenever I do this the value will show true or false but the moment I add another slide toggle both of them will go to true or false.  I'm not sure how to apply the index in this situation. </p>
  
  <p>html</p>
  
  <pre><code>&lt;form #f="ngForm" (ngSubmit)="addALayer(f)"&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Layer Name" ngModel name="layername"&gt;
      &lt;/mat-form-field&gt;
      &lt;button mat-icon-button 
              color="accent"
        &gt;&lt;mat-icon&gt;add_box&lt;/mat-icon&gt;&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
    &lt;div class="layerGroupings"&gt;
     &lt;div *ngFor="let layer of layers; let i = index"&gt;
      &lt;mat-slide-toggle [(ngModel)]="layeron"&gt;&lt;/mat-slide-toggle&gt; {{layer}} {{ layeron }}
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>layers = [];
  layeron: boolean;
  
  
  addALayer(form: NgForm) {
  this.layerName = form.value.layername;
  this.layers.push(this.layerName);
  }
  </code></pre>
  
  <p>Also what lifecycle hook would catch this change.  If I add a console.log(this.layeron) in the ngOnInit or even ngOnChanges nothing is registered in the console...</p>
  
  <p>Thanks!</p>