title: angular material mat-table: how to multiply two column values in a 3rd column
body: <p>I have an angular material table with a dropdown column by which users can select the time length. After users provide the number of time, I wanted to calculate the service fee for each service type and then do a total to sum a total for all selected services.
  [1]: <a href="https://i.stack.imgur.com/m2ukB.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/m2ukB.jpg</a></p>
  <p>The issue is the sub total (price * months) for all rows dynamically changes based on the last selected  number of month although the previously selected months remain no change.
  This is my template</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>......
  &lt;ng-container matColumnDef="price"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Price (USD/m) &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt; {{element.price | currency}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;                                        
  &lt;ng-container matColumnDef="month"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Months &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;
              &lt;mat-select placeholder="0" (selectionChange)="onChangeMonth($event)"&gt;
                  &lt;mat-option *ngFor="let month of months" [value]="month.value"&gt;
                  {{ month.viewValue }}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt; 
      &lt;/mat-cell&gt;                     
  &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="subtotal"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; SubTotal &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let element"&gt;
          {{element.price * serviceLength}}
      &lt;/mat-cell&gt;                               
  &lt;/ng-container&gt; 
  
  ......</code></pre>
  </div>
  </div>
  </p>
  <p>And this is my ts:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class StockAddsubsComponent implements OnInit {
    columnsToDisplay: string[] = ['id','name','price','month','subtotal'];
    listData: MatTableDataSource&lt;any&gt;;  
    months: any [] = [{value: 1, viewValue: 1}, {value: 3, viewValue: 3}, {value: 6, viewValue: 6}, {value: 12, viewValue: 12}
    ]; 
    serviceLength: number;
    
    @ViewChild(MatSort) sort: MatSort;
    
    constructor(private feesService: FeesService) { }
  
    ngOnInit(): void {
      this.createFeeList();
    }
  
    createFeeList() {                
      this.feesService.getFeeList().subscribe((data: []) =&gt; {
        this.listData = new MatTableDataSource(data);
        }, error =&gt; {
          console.log(error);
      });
    } 
  
    onChangeMonth(event) {
      this.serviceLength = event.value;
    }
  }</code></pre>
  </div>
  </div>
  </p>