title: Angular Dynamic [*ngModel)] for List of Inputs
body: <p>I'm trying to create a list of inputs with dynamic model but unfortunately, I get stuck on how I can implement this properly.</p>
  <p>Basically, I have sample <code>.ts</code> here. array of object has initial object which is the apple.</p>
  <pre><code>fruits: any[] = [
      {
          name1: 'Apple'
      }
  ]
  </code></pre>
  <p>In my UI, I created something like this one:</p>
  <pre><code>&lt;div *ngFor=&quot;let fruit of fruits; let i = index&quot;&gt;
      &lt;input type=&quot;text&quot; [(ngModel)]=&quot;fruit.name[i]&quot; /&gt;
  &lt;/div&gt;
      &lt;button (click)=&quot;addNewInput()&quot;&gt;Add new fruit&lt;/button&gt;
  </code></pre>
  <p>When the user clicks the <code>addNewInput()</code> button, then it should automatically add a new input.</p>
  <p>But I'm getting an error that says, <code>0 is undefined</code></p>
  <p>any help for this or alternative way to do this?</p>
  <p>Here is the StackBlitz link: <a href="https://stackblitz.com/edit/angular-ivy-tbkzjw?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-tbkzjw?file=src%2Fapp%2Fapp.component.html</a></p>