<td mat-cell *matCellDef="let thing">
{{ getContent(thing, displayedColumns[3]) | date: "MM/dd/yyyy" }}
</td>
The snippet above is a part of the MaterialTable, in particular it is table data within a table row. The mat-cell directive allows us to bind data etc.
This is actual code from a component we built to make use of the MaterialTable easier. Like this:
<app-material-table
[dataSource]="dataSource"
[showSearchBar]="true"
[displayedColumns]="[
'id',
'groupName',
'displayName',
'values',
'h3',
'h4'
]"
[columnHeaders]="['ID', 'Group Name', 'Display Name', 'Values']"
></app-material-table>
We simply reuse our app-material-table by hooking up the datSource, showing the search bar and configuring the column headers to the column property names.
This code:
{{ getContent(thing, displayedColumns[3]) | date: "MM/dd/yyyy" }}
Automatically piped the content to a date formatter. While this passed the muster early on, reusing this component proved the pipe to be a bad design. Why, because not all data was going to have a dateTime field in this column!
Take Away:
As we design 'generic' components we must take into account data types. For 'generic' component reuse the responsibility on data formatting is NOT on the reusable component unless there's a way to tell it when and how to format data; otherwise, the responsibility is on the caller.
JWP2020