title: Getting Values From td, input in Angular
body: <p>I'm having difficulty in getting the values from inside the table inside td and inputs. I tried to click the button and alert it but it gets undefined. How am i going to get the values from these fields? Fields are material, unit and quantity</p>
  
  <blockquote>
    <p>html</p>
  </blockquote>
  
  <pre><code>&lt;tr *ngFor="let addRow of row; let rowIndex = index"&gt;
    &lt;td&gt;
      &lt;select type="text" class="form-control" ngModel required #material&gt;
        &lt;option *ngFor="let material of materials" [value]="material.id"&gt;{{ material.name }}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="col-md-10" placeholder="pcs, pack, bag etc..." #unit&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="number" class="col-md-6" #quantity&gt;&lt;/td&gt;
    &lt;td&gt;10&lt;/td&gt;
    &lt;td&gt;
      &lt;button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(rowIndex)"&gt;&lt;i class="fa fa-trash-o" aria-hidden="true"&gt;&lt;/i&gt; Remove&lt;/button&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;button class = "btn btn-primary float-right" (click)="onCreate(material,unit,quantity)"&gt;&lt;i class="fa fa-floppy-o" aria-hidden="true"&gt;&lt;/i&gt;  Save&lt;/button&gt;
  </code></pre>
  
  <blockquote>
    <p>ts</p>
  </blockquote>
  
  <pre><code>onCreate(material, unit, quantity){
      alert(material);
    }
  </code></pre>