title: Angular 6 with Material, click event not working properly
body: <p>I am developing a simple Angular6-based form and want to create an input field similar to the ones I used at AWS.</p>
  
  <p>This is snipper of the code I have:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;mat-form-field class="full-width"&gt;
       &lt;input matInput [(ngModel)]="enteredText" type="text" (keyup.enter)="addToArray()" name="text"&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>And after comes my array of texts already added:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li *ngFor="let text of textArray; let i = index"&gt;
          &lt;span&gt; {{ text }} &lt;/span&gt;
          &lt;button mat-icon-button (click)="deleteTextFromArray(i)"&gt;&lt;mat-icon&gt;clear&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have an <code>enteredText</code> model as well as <code>textArray</code>. </p>
  
  <p>Here is the <code>addToArray()</code> funtion:</p>
  
  <pre class="lang-ts prettyprint-override"><code>addToArray() {
      this.textArray.push(this.enteredText);
      this.enteredText= '';
  }
  </code></pre>
  
  <p>Here is the <code>deleteTextFromArray</code> function:</p>
  
  <pre class="lang-ts prettyprint-override"><code>deleteTextFromArray(index) {
    this.textArray.splice(index, 1);
  }
  </code></pre>
  
  <p>The problem I have is that I am not able to insert more than 1 element into the array. For some reason after the first element, each insertion triggers my delete function. Thanks for helping.</p>