Make a data table in an Angular 6 application with Angular Materials.

Today, following these instructions, I finally got my feet wet with Angular materials making a component's template look like so:

<div id="wrapper">
   <mat-table class="lessons-table mat-elevation-z8" [dataSource]="presidents">
      <ng-container matColumnDef="Name">
         <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
         <mat-cell *matCellDef="let president">{{president.Name}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="Party">
         <mat-header-cell *matHeaderCellDef>Party</mat-header-cell>
         <mat-cell class="description-cell" *matCellDef="let president">{{president.Party}}
               </mat-cell>
      </ng-container>
      <ng-container matColumnDef="HasNonconsecutiveTerms">
         <mat-header-cell *matHeaderCellDef>HasNonconsecutiveTerms
               </mat-header-cell>
         <mat-cell class="duration-cell" *matCellDef="let president">
               {{president.HasNonconsecutiveTerms}}</mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
</div>

 
 

Back in the component's TypeScript. I had to have a variable like so:

displayedColumns = ["Name", "Party", "HasNonconsecutiveTerms"];

 
 

If you put a variable in a component in between the methods and you do not mark it as either public or private it will be public. However, in this case we could also make the variable explicitly private and private variables may be "seen" by the templates breaking in convention with for instance web forms where only a public variable may be accessed in the web form markup. Speaking of web forms the problem that Angular Materials tries to solve is a lot like the problem addressed by all of those canned controls for web forms. Why reinvent the wheel? Here are some simple controls for common to-dos. We need an import like this at our module and all of the types imported here also need to end up in the "imports" metadata property for the module.

import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule,
      MatSortModule, MatTableModule } from "@angular/material";

 
 

I'm probably using the description-cell and duration-cell classes the wrong way in the markup. Ha!