title: Angular Material Table Cell Formatting
body: <p>I'm using angular material table for displaying data and dyanmically binding the table header and table data. 
  Is there any way to format particaular column's cell content dynamically?.</p>
  
  <p>For example how can i format the value of amount column right aligned?</p>
  
  <p>My code is as below :</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" class="" style="width: 100%;"&gt;
  
        &lt;ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index"&gt;
          &lt;th *matHeaderCellDef&gt; {{displayedFields[i].name}}&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{ element[col] }} &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>And my data is like </p>
  
  <pre><code>[
    {
      "REFERENCE_ID": "ENT201810637610",
      "PRODUCT_TYPE": "IMPS",
      "CUSTOMER_REFERENCE": "CUS12123",
      "BENEFICIARY_NAME": "arun",
      "DEBIT_ACCOUNT": "100002258062",
      "AMOUNT": 342234,
      "STAGE_CODE": "FULLFILMENT",
      "STATUS_CODE": "NEW"
    },
    {
      "REFERENCE_ID": "ENT201808820426",
      "PRODUCT_TYPE": "IMPS",
      "CUSTOMER_REFERENCE": "12121",
      "BENEFICIARY_NAME": "Arun",
      "DEBIT_ACCOUNT": "32423424",
      "AMOUNT": 700,
      "STAGE_CODE": "INITIATION",
      "STATUS_CODE": "NEW"
    }
  ]
  </code></pre>