title: Angular: DataList not updating display
body: <p>I have a template like below:</p>
  
  <pre><code>&lt;div *ngFor="let x of inputs"&gt;
    &lt;input type="text" list="datalist" name="datalist"&gt;
      &lt;datalist id="datalist"&gt;
        &lt;option *ngFor = "let i of dataListOptions" [value]="i"&gt;{{i-1}}&lt;/option&gt;
      &lt;/datalist&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And a TS file like this:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  
  @Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css']
  })
  export class ExampleComponent implements OnInit {
  
    dataListOptions: any[] = [1, 2, 3, 4, 5, 6];
  
    constructor() {
    }
  
    ngOnInit() {
       this.dataListOptions.push(123);
    }
  }
  </code></pre>
  
  <p>When I update the dataListOptions in ngInit() or after it updates the DOM as I can see the new options but when I click on the input element I still cannot see newly inserted array data.</p>
  
  <p>I tried using ChangeDetectorRef after the update but still no luck.</p>
  
  <p>My question is that what should I do to make the options added after the dataListOptions definition visible. I can see them when I inspect the view but I cannot see them in a "drop down"</p>
  
  <p><a href="https://i.stack.imgur.com/bwhdb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bwhdb.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/WuWgJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WuWgJ.png" alt="enter image description here"></a></p>
  
  <p><strong>---UPDATE---</strong></p>
  
  <p>I just realised that ExampleComponent implements ControlValueAccessor. I have no idea why it was added nor how it works so I need to do some more investigations because it looks like it's involved somehow in updating the display or the domain</p>
  
  <p><strong>---UPDATE---</strong></p>
  
  <p>The input is in a loop</p>