title: How to change angular data table td element from {{element[column]}} to an input form field
body: <p>So, I have this angular materials data table that is being dynamically populated with columns and data from a json file. I have each row being populated using interpolaton -> <code>{{element[column]}}</code> right now inside of a standard <code>td</code> element. When I click on a row, I can highlight that specific row, but I want to change the <code>td</code> from <code>{{element[column]}}</code> to a <code>form</code>. So, basically <strong>I want to change that one specific line to a <code>form</code> element when a row is clicked on</strong>. I'm not sure how to approach this. </p>
  
  <p>I've tried to use <code>ngIf</code> to change between ng-templates, but that changes every single row when I click on the row. I only want to change the html element of the row I specifically clicked on. Any help or guidance would be appreciated. I can't actually upload any code due to my companies restrictions, but I can use mock code below to display my issue.  </p>
  
  <p>I have </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns"&gt;
  
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{column}} &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
          {{element[column]}}
      &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>I want to change the current <code>td</code> element when I click on a specific row to a <code>form</code> with <code>input</code>, but only that specific row, not all rows. </p>