title: how to dynamically edit a row on angular 8 material table
body: <p>I can't update a row on angular material table, when I change 
  the value of a cell (a field in the object table) the value of 
  the field is actually changed but it doesn't display directly on the browser, 
  How to make the update of a row be seen dynamically on the browser when the button action is executed</p>
  
  <p>this is my code </p>
  
  <p>View:</p>
  
  <pre class="lang-html prettyprint-override"><code>     &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8 widget-body"&gt;
  
  
              &lt;!-- Position Column --&gt;
              &lt;ng-container matColumnDef="ref"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Ref. &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.ref}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;!-- Name Column --&gt;
              &lt;ng-container matColumnDef="art"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Nom Article &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.art}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;!-- Weight Column --&gt;
              &lt;ng-container matColumnDef="quantity"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Quantite &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.quantity}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;!-- Symbol Column --&gt;
              &lt;ng-container matColumnDef="red"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Reduction &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.red}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="prixht"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Prix Hors Taxe &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.prixht}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
  
              &lt;ng-container matColumnDef="tva"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; TVA &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.tva}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="prixtt"&gt;
                &lt;th mat-header-cell *matHeaderCellDef&gt; Prix Total &lt;/th&gt;
                &lt;td mat-cell *matCellDef="let element"&gt; {{element.prixtt}} &lt;/td&gt;
              &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="actions"&gt;
              &lt;th mat-header-cell *matHeaderCellDef width="106px" class="kt-pl-13"&gt;
                Actions
              &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt;
                &lt;button mat-icon-button color="primary" (click)="Update(element)" type="button" &gt;&lt;mat-icon&gt;create&lt;/mat-icon&gt;&lt;/button&gt;
  
              &lt;/td&gt;
            &lt;/ng-container&gt;
            &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
            &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class TableauComponent implements OnInit {
    displayedColumns: string[] = ['ref', 'art', 'quantity', 'red','prixht','tva','prixtt','actions'];
    dataSource = new MatTableDataSource&lt;Data&gt;();
    qte=18;
  
    constructor() {}
  
    ngOnInit()  {}
  
    Update(obj){
  
     for(var i=0;i&lt;this.dataSource.data.length;i++){
        if(this.dataSource.data[i].ref==obj.ref){
           console.log(this.dataSource.data[i]);
           this.dataSource.data[i].quantity=qte;
            break;
        }
     }
     this.dataSource._updateChangeSubscription(); 
    }
  
  }
  ```
  
  
  
  
  
  
  </code></pre>