title: Sorting with dynamic column - Angular material
body: <p>I am using this <a href="https://stackblitz.com/angular/emqnabpolka?file=app%2Ftable-basic-example.ts" rel="nofollow noreferrer">URL</a> and I am doing sorting. Sorting is working fine but, I have 2 numeric column</p>
  
  <ol>
  <li>Weight - Its value is coming from DB via API Call and it is present in dataSource. (here, sorting is working)</li>
  <li>Double Weight : Its formula is: Weight * 2. 
  Here, <strong>"Double weight"</strong> is calculated dynamically in HTML and hence it isn't available in datasource. </li>
  </ol>
  
  <p>I need to apply sorting in <strong>"Double weight"</strong> column. Can someone please guides me on this.</p>
  
  <p><strong>HTML</strong></p>
  
  <p>&lt; ng-container matColumnDef="weight"></p>
  
  <p>&lt; th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </p>
  
  <p>&lt; td mat-cell *matCellDef="let element"> {{element.weight}} </p>
  
  <p>&lt; /ng-container></p>
  
  <p>&lt; ng-container matColumnDef="weight2"></p>
  
  <p>&lt; th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </p>
  
  <p>&lt; td mat-cell *matCellDef="let element"> {{element.weight * 2}} </p>
  
  <p>&lt; /ng-container></p>
  
  <p><strong>TS</strong></p>
  
  <pre><code>@ViewChild(MatSort) sort: MatSort;
  ngOnInit() {
  this.dataSource.sort = this.sort;
  }
  </code></pre>