installation de Angular Material

Front/skydivelogs-app/src/app/app.module.ts

@@ -14,6 +14,9 @@ import { ListOfJumpTypesComponent } from './list-of-jump-types/list-of-jump-type
 
 import { ServiceApi } from '../services/serviceApi';
 import { ServiceComm } from '../services/serviceComm';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
 
 
 const appRoutes: Routes = [
@@ -42,6 +45,9 @@ const appRoutes: Routes = [
       { enableTracing: true } // <-- debugging purposes only
     ),
     BrowserModule,
+    BrowserAnimationsModule,
+    MatPaginatorModule,
+    MatTableModule
   ],
   exports: [HttpClientModule],
   providers: [ServiceApi, ServiceComm],

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

@@ -2,22 +2,15 @@
   list-of-dzs works!
 </p>
 
-<!-- <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">
+<table mat-table [dataSource]="listOfDropZones" class="mat-elevation-z8">
   <ng-container matColumnDef="id">
-    <th mat-header-cell *matHeaderCellDef> ID </th>
-    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+    <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>
+    <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,6 +1,4 @@
 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';

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { JumpResp } from '../../models/jump';
 import { ServiceApi } from '../../services/serviceApi';
 import { ServiceComm } from '../../services/serviceComm';