title: How to change a MaterialTable Cell content on click?
body: <h1>Big Picture</h1>
  <p>Hi,
  I'm trying to use Angular Material in Angular 7.
  I have to use a Material table with some data on it. <strong>My question is: Is there a way to change a MatCell content on click?</strong>
  For example, consider the table in HTML above, with people's name, age and phone.</p>
  <h3>Angular Material Table HTML</h3>
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput (keyup)=&quot;applyFilter($event.target.value)&quot; placeholder=&quot;Phone&quot;&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot; matSort &gt;
        
      &lt;ng-container matColumnDef=&quot;name&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let person&quot; &gt;{{person.name}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
        
      &lt;ng-container matColumnDef=&quot;age&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Age&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let person&quot;&gt;{{person.age}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
        
      &lt;ng-container matColumnDef=&quot;phone&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Phone Number&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let person&quot;&gt;{{person.phone}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
  
  &lt;/mat-table&gt;
  &lt;mat-paginator [length]=&quot;100&quot; [pageSize]=&quot;5&quot; [pageSizeOptions]=&quot;[5, 10, 25, 100]&quot;&gt;&lt;/mat-paginator&gt;
  </code></pre>
  <h1>What works</h1>
  <p>Table to diplay data, pagination, filter and sorting headers are working great!</p>
  <h1>What I need</h1>
  <p>I want to do is <strong>when I click in the phone cell, insted of a text, a <code>&lt;input&gt;</code> tag takes <code>{{person.phone}}</code> place with the current number</strong>, allowing me to change the phone number and save the new one.
  like this:</p>
  <h3>Desired MatCell content on click</h3>
  <pre><code>&lt;ng-container matColumnDef=&quot;phone&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Phone Number&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let person&quot;&gt;
          &lt;input matInput [value]=&quot;person.phone&quot;(focusout)=&quot;changePhone($event.target.value, person)&quot; placeholder=&quot;Phone&quot;&gt;
      &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>Can anyone help me please?</p>