Début d'ajout de Amgular-Material

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -2,9 +2,22 @@
   list-of-dzs works!
 </p>
 
-<table>
+<!-- <table>
   <tr *ngFor="let dropZone of this.listOfDropZones; index as i;">
     <td>{{ dropZone.id }}</td>
     <td>{{ dropZone.name }}</td>
   </tr>
+</table> -->
+
+<table mat-table [dataSource]="listOfDropZones">
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef> ID </th>
+    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 </table>
+<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>