Début d'ajout de Amgular-Material

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

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

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>

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

@@ -1,4 +1,7 @@
 import { Component, OnInit, Injectable } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
 import { DropZoneResp } from '../../models/dropzone';
 import { ServiceApi } from '../../services/serviceApi';
 import { ServiceComm } from '../../services/serviceComm';