title: Angular material button not clickable when iterating over new objects when an input array is initialized from a Typescript getter
body: <p>I have the following bewildering Angular problem.</p>
  
  <p><strong>Edit: I managed to reproduce this in the Stackblitz example, and updated the text here.</strong></p>
  
  <p>Stackblitz example <a href="https://stackblitz.com/edit/angular-fyup5j" rel="nofollow noreferrer">here</a>.</p>
  
  <p>This shows four sets of three list entries with a delete icon, with the following pairings:</p>
  
  <pre><code>string input/passed from a getter
  string input/passed from a field
  array input/passed from a getter
  array input/passed from a field
  </code></pre>
  
  <p><strong>In the array/getter case</strong>, when I click the first (from <code>items1</code>), nothing is logged to the console; but clicking the second (from <code>items2</code>) or the third (from <code>items3</code>), it logs <code>'delete'</code>. In the other cases, it <em>always</em> logs delete, as expected.</p>
  
  <p><strong>What might be going on here?</strong></p>
  
  <p>Code follows, although the <a href="https://stackblitz.com/edit/angular-fyup5j" rel="nofollow noreferrer">Stackblitz</a> is easy to play with.</p>
  
  <p>First, the parent HTML, which sets up the four cases:</p>
  
  <pre class="lang-html prettyprint-override"><code>String with getter
  &lt;hello [name]="name1"&gt;
  &lt;/hello&gt;
  &lt;hr/&gt;
  String without getter
  &lt;hello [name]="name2"&gt;
  &lt;/hello&gt;
  &lt;hr/&gt;
  Array with getter
  &lt;hello [names]="names1"&gt;
  &lt;/hello&gt;
  &lt;hr/&gt;
  Array without getter
  &lt;hello [names]="names2"&gt;
  &lt;/hello&gt;
  </code></pre>
  
  <p>and Typescript:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent {
    get name1(): string {
      return 'Angular';
    }
    name2 = 'Angular';
    get names1(): string[] {
      return ['Angular'];
    }
    names2 = ['Angular'];
  }
  </code></pre>
  
  <p>And then the component HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-list&gt;
    &lt;ng-container *ngFor="let item of items1"&gt;
      &lt;mat-list-item&gt;
        &lt;h2 mat-line&gt;Some Text&lt;/h2&gt;
        &lt;button mat-icon-button (click)="delete()"&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;/mat-list-item&gt;
    &lt;/ng-container&gt;
    &lt;ng-container *ngFor="let item of items2"&gt;
      &lt;mat-list-item&gt;
        &lt;h2 mat-line&gt;Some Text&lt;/h2&gt;
        &lt;button mat-icon-button (click)="delete()"&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;/mat-list-item&gt;
    &lt;/ng-container&gt;
    &lt;ng-container *ngFor="let item of items3"&gt;
      &lt;mat-list-item&gt;
        &lt;h2 mat-line&gt;Some Text&lt;/h2&gt;
        &lt;button mat-icon-button (click)="delete()"&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;/mat-list-item&gt;
    &lt;/ng-container&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <p>and Typescript:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'hello',
    templateUrl: './hello.component.html',
    styles: [`h1 { font-family: Lato; }`]
  })
  export class HelloComponent  {
    @Input() name: string;
    @Input() names: string[];
  
    items1: Number[] = [];
    items2: Number[] = [];
    items3 = [new Number(42)];
  
    ngOnChanges() {
      this.items1 = [new Number(42)];
      this.items2 = [42];
    }
  
    delete() {
      console.log('delete');
    }
  }
  </code></pre>