title: How to store value of edited row in variable of mat table
body: <p>I am new in on stackoverflow and this is my first question here.
  I have 3 columns in my mat table: key,value and edit icon. After clicking edit icon i am getting input box to edit it. Now i want to get those edite data after clicking update button in separate variables in TS file. But getting "undefind".</p>
  
  <p>here is my stackblitz link:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-ifrzkl-tg4eha?file=src%2Fapp%2Ftable-basic-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ifrzkl-tg4eha?file=src%2Fapp%2Ftable-basic-example.ts</a></p>
  
  <blockquote>
    <p>approval.componenet.html</p>
  </blockquote>
  
  <pre><code>&lt;div&gt;
      &lt;button mat-stroked-button class="b1" (click)="update()" formtarget="_blank"&gt;Update&lt;/button&gt;
      &lt;h5&gt;Request Details&lt;/h5&gt;
      &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z1"&gt;
          &lt;ng-container matColumnDef="key"&gt;
          &lt;td mat-cell *matCellDef="let element" class="item-name"&gt; {{element.key}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="value" &gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element" &gt; 
                &lt;span *ngIf="!element.editable; else editPlace"&gt;
                {{element.value}} 
                &lt;/span&gt;
                &lt;ng-template #editPlace&gt;
                  &lt;input [(ngModel)]="element.value" (keyup.enter)="element.editable = false"&gt;
                &lt;/ng-template&gt;
              &lt;/td&gt;
            &lt;/ng-container&gt;
  
  
            &lt;ng-container matColumnDef="actions"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;Actions &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;button mat-icon-button matTooltip="Click to Edit" (click)="edit(element)" class="iconbutton" color="primary"&gt;
                    &lt;mat-icon aria-label="Edit"&gt;edit&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
  
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>approval.component.ts</p>
  </blockquote>
  
  <pre><code>edit(e: any) {
      e.editable = !e.editable;
    }
  
    update()
    {
      const usr=this.value;
      console.log(usr);
    }
  </code></pre>