Generic Components and Bad Design

<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