title: Angular2 bind ngModel from ngFor
body: <p>So I'm rendering my <code>textarea</code> dynamically using <code>ngFor</code> however I'm not sure how I can pass the <code>ngModel</code> to bind it in my function.</p>
  
  <pre><code>&lt;div *ngFor="let inputSearch of searchBoxCount; let i = index" [ngClass]="{'col-sm-3': swaggerParamLength=='3', 'col-sm-9': swaggerParamLength=='1'}"&gt;
     &lt;textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="3" class="search-area-txt" attr.placeholder="Search Product {{inputSearch.name}}"
       [(ngModel)]="inputSearch.name"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>textarea example:
  <a href="https://i.stack.imgur.com/NSjQI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NSjQI.png" alt="enter image description here"></a></p>
  
  <p>textarea is render based on the length of the response I get from api call in my case <code>searchBoxCount</code> is basically <code>searchBoxCount.length</code>, so if it <code>length</code> is = 1 then it will only render 1 <code>textarea</code> if its 3 then it will show 3 <code>textareas</code>. The objs have different names (example: id/email/whatever), so ngModel is based on the obj name from the json object.</p>
  
  <p>How do I bind <code>inputSearch.name</code> to my function <code>getQueryString()</code></p>
  
  <pre><code> getQueryString() {
      this.isLoading = true;
      let idInputValue = inputSearch.name; //bind it here
  
      return "?id=" + idInputValue
          .split("\n") // Search values are separated by newline and put it in array collection.
          .filter(function(str) {
              return str !== ""
          })
          .join("&amp;id=");
  }
  </code></pre>
  
  <p>Search func where getQueryString() is called</p>
  
  <pre><code>searchProduct() {
      let queryString1 = this.getQueryString();
      this._searchService.getProduct(queryString1)
          .subscribe(data =&gt; {
              console.log(data);
          });
  }
  </code></pre>
  
  <p>I know how to do it if the <code>ngModel</code> is not coming from the <code>ngFor</code>, is there another way to get the value from the <code>textarea</code> without <code>ngModel</code>? maybe that's the only way or if I can still use <code>ngModel</code>.</p>