title: Mat-Button click inside a *ngFor with let index = index does not react/fire action
body: <p>I am currently working on a project where I have a <code>reactive form array</code> which will be displayed on the template using an <code>*ngIf</code>. I think that's the normal use case and nothing special. But now I build this like</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div *ngFor="let control of form.controls['someArray'].value; let index = index"&gt;
    [...]
    &lt;button mat-flat-button color="warn"&gt;Delete&lt;/button&gt;
  &lt;/div&gt;
  &lt;button mat-flat-button color="primary"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>The <code>Delete</code> button does not react to my clicks, but the <code>Add</code> button does. For some reason when I remove the <code>let index = index</code> it works again or if I put the button outside of this <code>*ngFor</code>.</p>
  
  <p>I hope you can help me. Thank you very much. Couldn't find any solution so far.</p>
  
  <p>Example: <a href="https://stackblitz.com/edit/angular-form-array-example-hq5tud" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-form-array-example-hq5tud</a></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;form [formGroup]="form"&gt;
        &lt;input type="checkbox" formControlName="published"&gt; Published
        &lt;div *ngIf="form.controls.published.value"&gt;
  
          &lt;h2&gt;Credentials&lt;/h2&gt;
          &lt;button (click)="addCreds()"&gt;Add&lt;/button&gt;
  
          &lt;div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index"&gt;
            &lt;ng-container [formGroupName]="i"&gt;
              &lt;input placeholder="Username" formControlName="username"&gt;
              &lt;input placeholder="Password" formControlName="password"&gt;
              &lt;button mat-flat-button (click)="buttonClick()"&gt; Test inside &lt;/button&gt;
            &lt;/ng-container&gt;
          &lt;/div&gt;
          &lt;button mat-flat-button (click)="buttonClick()"&gt; Test outside &lt;/button&gt;
  
        &lt;/div&gt;
      &lt;/form&gt;
    `,
  })
  export class AppComponent  {
    form: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.form = this.fb.group({
        published: true,
        credentials: this.fb.array([]),
      });
    }
  
    addCreds() {
      const creds = this.form.controls.credentials as FormArray;
      creds.push(this.fb.group({
        username: '',
        password: '',
      }));
    }
  
    buttonClick() {
      console.log('Clicked');
    }
  }
  
  </code></pre>