From 85511fb0defaec088f9f6a0583e86a4d04adc499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <Sebastien.ANDRE@external.loccitane.com>
Date: Wed, 9 Oct 2019 18:27:56 +0200
Subject: [PATCH] =?UTF-8?q?D=C3=A9but=20d'ajout=20de=20Amgular-Material?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/list-of-dzs/list-of-dzs.component.css |  3 +++
 .../app/list-of-dzs/list-of-dzs.component.html    | 15 ++++++++++++++-
 .../src/app/list-of-dzs/list-of-dzs.component.ts  |  3 +++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css
index e69de29..1922e7f 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
index aa86f80..709df9b 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
+++ b/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>
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
index e0d2fe5..dfe7739 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
+++ b/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';