list-users.component.html

<table mat-table [dataSource]="users$" class="mat-elevation-z8">
  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef>First Name</th>
    <td mat-cell *matCellDef="let user">{{user.firstName}}</td>
  </ng-container>
  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef>Last Name</th>
    <td mat-cell *matCellDef="let user">{{user.lastName}}</td>
  </ng-container>
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef>Email</th>
    <td mat-cell *matCellDef="let user">{{user.email}}</td>
  </ng-container>
  <ng-container matColumnDef="dob">
    <th mat-header-cell *matHeaderCellDef>Birth Date</th>
    <td mat-cell *matCellDef="let user">{{user.dob}}</td>
  </ng-container>
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef>Action</th>
    <td mat-cell *matCellDef="let user">
      <button mat-raised-button color="accent" (click)="display(user)">View User</button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columns$"></tr>
  <tr mat-row *matRowDef="let row; columns: columns$;"></tr>
</table>