title: How to bind a value to a textbox using *ngFor local variable in angular2
body: <p>I am trying to execute some sample code in Angular2.
  I have a button called ADD. While clicking on the ADD button one new table row will be added with a set of controls like textbox, select etc.
  Once I filled these details, then, if I again click on the ADD button a new row will be added but previously filled details will be cleared(empty).
  What I want is that whenever I click on the ADD button a new row should be added but the previously populated values should not be cleared.</p>
  
  <p>Here is my sample code:</p>
  
  <p><strong>1. component.html</strong></p>
  
  <pre><code>&lt;table td-data-table [class.md-selectable]="selectable"&gt;
      &lt;tr td-data-table-row  *ngFor="let account of voucher.accountList;let i = index;trackBy:i;"&gt;
          &lt;td td-data-table-cell&gt;
  
              &lt;md2-select [(ngModel)]="account.account" (change)="selectedAccount($event)" placeholder="Select account" name="account"&gt;
                  &lt;md2-option *ngFor=" let account of accounts" [value]="account.account" &gt;{{account.name}}&lt;/md2-option&gt;
              &lt;/md2-select&gt;                 
          &lt;/td&gt;
          &lt;td td-data-table-cell&gt; 
  
              &lt;md-input flex placeholder="description" type="text"  maxlength="50" name="description" #description="ngModel"
                               [(ngModel)]="account.description"  &gt;             
              &lt;/md-input&gt;                
          &lt;/td&gt;
          &lt;td td-data-table-cell&gt;
  
              &lt;md-input  flex placeholder="debit" type="text" maxlength="50"  name="debit"  #debit="ngModel"
                               [(ngModel)]="account.debit"  &gt;             
              &lt;/md-input&gt;   
          &lt;/td&gt;
          &lt;td td-data-table-cell&gt;
  
              &lt;md-input #creditElement  flex placeholder="credit" type="text" maxlength="50"  name="credit" #credit="ngModel"
                               [(ngModel)]="account.credit"  &gt;             
              &lt;/md-input&gt;   
          &lt;/td&gt;
          &lt;td td-data-table-cell&gt;
  
              &lt;md2-select [(ngModel)]="account.tax" (change)="selectedTax($event)" placeholder="Select tax" name="tax"&gt;
                  &lt;md2-option *ngFor="let tax of taxList" [value]="tax.value" &gt;{{tax.display}}&lt;/md2-option&gt;
              &lt;/md2-select&gt;
          &lt;/td&gt;
          &lt;td td-data-table-cell&gt;
  
              &lt;button md-mini-fab    color="primary"  (click)="removerow(account)"&gt;
                  &lt;md-icon  color="#6b9bea"&gt;close&lt;/md-icon&gt;
              &lt;/button&gt;   
          &lt;/td&gt;
          &lt;td td-data-table-cell&gt;
  
              &lt;button md-mini-fab    color="primary"  (click)="addrow()" *ngIf="i==(voucher.accountList.length-1)"&gt;
                   &lt;md-icon &gt;add&lt;/md-icon&gt;
              &lt;/button&gt;                   
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code> //sample model
  
    voucher={
      referenceNo:"",
      date:"",
      narration:"",
      accountList:this.transaction,
      notes:""
    };
  
   transaction=[{
      id:null,account:null,description:"",debit:"",credit:"",tax:""
    }]   
  
    addrow(){
  
      this.voucher.accountList.push({id:"",account:"",description:"",debit:"",credit:"",tax:""});
  
    }
  
    removerow(row){
  
       this.voucher.accountList.forEach(x=&gt;
       {
         if(x==row){
            var index= this.voucher.accountList.indexOf(row)
           this.voucher.accountList.splice(index,1);
         }
       });
      }
  </code></pre>