installation de Angular Material

This commit is contained in:
Sébastien André
2019-10-10 10:48:57 +02:00
parent 436b9fd6a7
commit e2baa1486a
12 changed files with 113 additions and 74 deletions

View File

@@ -21,6 +21,7 @@
"src/favicon.ico"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.css"
],
"scripts": []
@@ -71,6 +72,7 @@
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.css"
],
"assets": [

View File

@@ -267,11 +267,28 @@
}
},
"@angular/animations": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.2.11.tgz",
"integrity": "sha512-J7wKHkFn3wV28/Y1Qm4yjGXVCwXzj1JR5DRjGDTFnxTRacUFx7Nj0ApGhN0b2+V0NOvgxQOvEW415Y22kGoblw==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.2.10.tgz",
"integrity": "sha512-JX3r3CC5yt4s+XevUPyqbKIdGFb8FxoDCjCHi2ujBVRRsZaSZK8STIZsy+l+WZUd7/7Qu8MYCw0vazZN0kNyDg==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/cdk": {
"version": "8.2.3",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.2.3.tgz",
"integrity": "sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^1.7.1"
},
"dependencies": {
"parse5": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
"integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
"optional": true
}
}
},
"@angular/cli": {
@@ -331,19 +348,19 @@
}
},
"@angular/common": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.11.tgz",
"integrity": "sha512-LniJjGAeftUJDJh+2+LEjltcGen08C/VMxQ/eUYmesytKy1sN+MWzh3GbpKfEWtWmyUsYTG9lAAJNo3L3jPwsw==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-8.2.10.tgz",
"integrity": "sha512-ZbSTbyn6BrOvBqLZvDNeiatJNgH9LV/Qm0kLwfthrBYNPlS4eUzSn4EMO3n4vVFWCsyCNM0ieQjtKmyD1lg1fg==",
"requires": {
"tslib": "^1.7.1"
"tslib": "^1.9.0"
}
},
"@angular/compiler": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.11.tgz",
"integrity": "sha512-ICvB1ud1mxaXUYLb8vhJqiLhGBVocAZGxoHTglv6hMkbrRYcnlB3FZJFOzBvtj+krkd1jamoYLI43UAmesqQ6Q==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.2.10.tgz",
"integrity": "sha512-pIHGhu+eXzTIsfQtYGnFi1Mknk+Z0h9lMVUpq6cazHukUBl76HVCeaGJ9+/sdHhDqNTrDV2ceCE0GkTU3H7RdA==",
"requires": {
"tslib": "^1.7.1"
"tslib": "^1.9.0"
}
},
"@angular/compiler-cli": {
@@ -379,49 +396,57 @@
}
},
"@angular/core": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.11.tgz",
"integrity": "sha512-h2vpvXNAdOqKzbVaZcHnHGMT5A8uDnizk6FgGq6SPyw9s3d+/VxZ9LJaPjUk3g2lICA7og1tUel+2YfF971MlQ==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.10.tgz",
"integrity": "sha512-nUd/xZWIb1DHbr8agjVTvk4XUN9yBGEGQWN5ja5wJbPasoZC2GfiBHcmhttGHkocyB674d3x+xR2MvMvzEUdvw==",
"requires": {
"tslib": "^1.7.1"
"tslib": "^1.9.0"
}
},
"@angular/forms": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.11.tgz",
"integrity": "sha512-wBllFlIubPclAFRXUc84Kc7TMeKOftzrQraVZ7ooTNeFLLa/FZLN2K8HGyRde8X/XDsMu1XAmjNfkz++spwTzA==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.10.tgz",
"integrity": "sha512-41Vjc55EGEW5I+3N0wiNQL4vbFgQwWrwnN6H2mvOx7WOprHSfL5a9kk+5s/13kql3es7vyPyDDqQqkmBWuQtzg==",
"requires": {
"tslib": "^1.7.1"
"tslib": "^1.9.0"
}
},
"@angular/language-service": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.2.11.tgz",
"integrity": "sha512-tgnFAhwBmUs1W0dmcmlBmUlMaOgkoyuSdrcF23lz8W5+nSLb+LnbH5a3blU2NVqA4ESvLKQkPW5dpKa/LuhrPQ==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-8.2.10.tgz",
"integrity": "sha512-VJaFkbffRPh4WC8aW01BXljLVyiMs2p32LgGxPTntNZ4cSLDRkUXkIoiCMUK9CHl+RCstFKWhlDnppONDePONw==",
"dev": true
},
"@angular/platform-browser": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.11.tgz",
"integrity": "sha512-6YZ4IpBFqXx88vEzBZG2WWnaSYXbFWDgG0iT+bZPHAfwsbmqbcMcs7Ogu+XZ4VmK02dTqbrFh7U4P2W+sqrzow==",
"@angular/material": {
"version": "8.2.3",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-8.2.3.tgz",
"integrity": "sha512-SOczkIaqes+r+9XF/UUiokidfFKBpHkOPIaFK857sFD0FBNPvPEpOr5oHKCG3feERRwAFqHS7Wo2ohVEWypb5A==",
"requires": {
"tslib": "^1.7.1"
}
},
"@angular/platform-browser": {
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.10.tgz",
"integrity": "sha512-HHxI+25z3bSMrwvgRkCVgo8v1BmKiqdVDHiLa5uRUCVo9QAlPyvugqa949okzVVS2aOVso5jRKqqAz09qBH6dA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/platform-browser-dynamic": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.11.tgz",
"integrity": "sha512-5kKPNULcXNwkyBjpHfF+pq+Yxi8Zl866YSOK9t8txoiQ9Ctw97kMkEJcTetk6MJgBp/NP3YyjtoTAm8oXLerug==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.2.10.tgz",
"integrity": "sha512-mpViCrRlCOtM4iW1VwPwANEAPLu2gHAQbtnZheSN1RSyuXFoe1th8ToGfSWcsWa0Hep6xU0sunYbaYWtb2IgjA==",
"requires": {
"tslib": "^1.7.1"
"tslib": "^1.9.0"
}
},
"@angular/router": {
"version": "5.2.11",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.11.tgz",
"integrity": "sha512-NT8xYl7Vr3qPygisek3PlXqNROEjg48GXOEsDEc7c8lDBo3EB9Tf328fWJD0GbLtXZNhmmNNxwIe+qqPFFhFAA==",
"version": "8.2.10",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-8.2.10.tgz",
"integrity": "sha512-qY5HnxrP1pKq87xp/iREVEGFmIB+NXZnS4BFN0sU8vwqPtEv8yC45YNIilT4zwn2fDxmTHvC7W+t3+yRizz+cQ==",
"requires": {
"tslib": "^1.7.1"
"tslib": "^1.9.0"
}
},
"@babel/code-frame": {
@@ -5196,6 +5221,11 @@
"integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==",
"dev": true
},
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -8689,13 +8719,18 @@
}
},
"rxjs": {
"version": "5.5.12",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
"integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz",
"integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==",
"requires": {
"symbol-observable": "1.0.1"
"tslib": "^1.9.0"
}
},
"rxjs-compat": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.5.3.tgz",
"integrity": "sha512-BIJX2yovz3TBpjJoAZyls2QYuU6ZiCaZ+U96SmxQpuSP/qDUfiXPKOVLbThBB2WZijNHkdTTJXKRwvv5Y48H7g=="
},
"safe-buffer": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
@@ -9815,11 +9850,6 @@
"has-flag": "^3.0.0"
}
},
"symbol-observable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
"integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
},
"tapable": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -10242,9 +10272,9 @@
"dev": true
},
"typescript": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.3.tgz",
"integrity": "sha512-ptLSQs2S4QuS6/OD1eAKG+S5G8QQtrU5RT32JULdZQtM1L3WTi34Wsu48Yndzi8xsObRAB9RPt/KhA9wlpEF6w==",
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
"integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==",
"dev": true
},
"uglify-js": {

View File

@@ -12,16 +12,20 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@angular/animations": "^8.2.10",
"@angular/cdk": "~8.2.3",
"@angular/common": "^8.2.10",
"@angular/compiler": "^8.2.10",
"@angular/core": "^8.2.10",
"@angular/forms": "^8.2.10",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "^8.2.10",
"@angular/platform-browser-dynamic": "^8.2.10",
"@angular/router": "^8.2.10",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"hammerjs": "^2.0.8",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
@@ -29,7 +33,7 @@
"@angular-devkit/build-angular": "~0.803.8",
"@angular/cli": "^8.3.8",
"@angular/compiler-cli": "^8.2.10",
"@angular/language-service": "^5.2.0",
"@angular/language-service": "^8.2.10",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
@@ -44,6 +48,6 @@
"protractor": "^6.0.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
"typescript": "~3.5.3"
}
}

View File

@@ -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],

View File

@@ -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>

View File

@@ -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';

View File

@@ -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';

View File

@@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>

View File

@@ -1,3 +1,4 @@
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

View File

@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { DropZoneResp } from '../models/dropzone';

View File

@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ServiceComm {

View File

@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }