title: How to make an editable Angular table?
body: <p>I'm trying to create an editable table and it's not working and I can't figure out why.</p>
  
  <p>I've done some research and I understand that there are at least three options.</p>
  
  <ol>
  <li>Using <strong>FormArray</strong> and <strong>ngIf</strong> on the input field</li>
  <li>Using <strong>FormGroup</strong> and <strong>Dynamic Component</strong></li>
  <li>Using <code>&lt;input [formControl]="row.validator.controls['fieldName']"&gt;</code> like in this example <a href="https://www.npmjs.com/package/angular4-material-table" rel="nofollow noreferrer">angular4-material-table</a></li>
  </ol>
  
  <p>If I try to use <strong>angular4-material-table</strong> <a href="https://stackblitz.com/edit/angular-tj9f6y" rel="nofollow noreferrer">stackblitz</a> locally I get this <a href="https://i.stack.imgur.com/KSrQK.jpg" rel="nofollow noreferrer">error</a>. Also in this example, owner of the code is using a <strong>Template Driven</strong> approach and I don't know how to convert to a <strong>Reactive</strong> approach. I tried to make my own table using first or second option without any result.</p>
  
  <p>Now my code is inspired by the third option.</p>
  
  <p>Here is the code - <a href="https://stackblitz.com/edit/angular-s7zhxw-v7olwa?file=app/table-basic-example.ts" rel="nofollow noreferrer">stackblitz</a> (with <a href="https://stackoverflow.com/users/4855306/bryan60"><em>@bryan60</em></a> adjustment)</p>