title: Dynamic value append to the dynamic text field using Angular template reference
body: <p>I have following html code, when I click on the button need to be change same row text field value. My question is how to refer the input field and append the value?</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div *ngFor="let item of [1,2,3,4]; let i = index"&gt;
    &lt;input type="text" #textField{{i}} /&gt;
    &lt;button #btn{{i}} (click)="myEvent(i)"&gt;Click to Change&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>export class AppComponent  {
    myEvent(i) {
      if(i == 0) {
        // textField0 append a new value to the text field
      }
    }
  }
  </code></pre>
  
  <p>Thanks all</p>
  
  <p><a href="https://stackblitz.com/edit/angular-ydgzgf" rel="nofollow noreferrer">Sample demo here</a></p>