Créer et lancer un nouveau projet Angular 5
Nous allons voir ensemble comment on pourra créer nous-même notre propre thème Material avec Angular 5.
cas.
npm install -g @angular/cli
Vérifiant maintenant la version installé d’Angular, et node à l’aide de la commande ci-dessous
ng -v
Angular CLI: 1.5.0
Node: 7.8.0
Créer un nouveau projet.
ng new angular-theming
cd angular-theming
Lancer l’application
Ouvrir votre projet à l’aide de Visual Sudio Code ou autre Editeur. Dans la racine de projet lancer la commande
ng serve
Normalement on aura un visuel identique à l’image ci–dessous sur notre navigateur web http://localhost:4200.
Notre arborescence des fichiers ressemblera à :
Ajouter Material à votre projet Angular 5
Maintenant on va ajouter Material dans notre projet.
npm install –save @angular/material @angular/cdk @angular/animations
Ici on a ajouté deux packages
@angular/material : c’est le package officiel pour Angular
@angular/animations : c’est le package qui contient l’animation, on a décidé de l’ajouté car certain de composant Material ont besoin d’animation pour le bien fonctionnement.
Ouvrir src/app/app.module.ts et importer Material de la manière suivante
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { MatButtonModule } from ‘@angular/material/button’;
Il ne faut pas oublier d’ajouter les dependences dans @NgModule
On va faire une petite modification dans le fichier style.css (voir le code ci-dessous)
/* You can add global styles to this file, and also import other style files */
@import ‘~https://fonts.googleapis.com/icon?family=Material+Icons’;
@import « ~@angular/material/prebuilt-themes/indigo-pink.css »;
html, body {
margin: 0;
font-family: Roboto, sans-serif;
height: 100%;
}
On va modifier le fichier src/app/app.component.html
<mat-card>
<div class= »button-row »>
<button mat-raised-button>Basic</button>
<button mat-raised-button color= »primary »>Primary</button>
<button mat-raised-button color= »accent »>Accent</button>
<button mat-raised-button color= »warn »>Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button routerLink= ». »>Link</a>
</div>
</mat-card>
Vérifiant notre visuel sur le navigateur http://localhost:4200
Et voilà Material est déjà importé dans notre projet.
Notre visuel a changé, on remarque bien que Material est déjà intégré dans notre projet.
Créer un thème Material
Pour créer un thème Material, d’abord il faut aller sur le site http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5
Créer trois palettes des couleurs différentes, ensuite exporter votre thème en choisissant l’option « Angular JS 2 (MATERIAL 2) »
Copier/coller le code dans une nouvelle fichier sur la racine de l’application (exemple renommé le fichier src/palette.scss)
Puis, créer une deuxième fichier nommé project-theming.scss au même niveau de fichier qu’on vient de le créer « palette.scss »
Ci-dessous le code à ajouter dans cette fichier
@import ‘~@angular/material/theming’;
@import ‘./palette’;
@include mat-core();
$myProject-primary: mat-palette($md-primary);
$myProject-accent: mat-palette($md-accent, 500, A100, A400);
$myProject-warn: mat-palette($md-warn);
$myProject-foreground: mat-palette($md-primary);
$myProject-theme: mat-light-theme($myProject-primary, $myProject-accent, $myProject-warn);
@include angular-material-theme($myProject-theme);
Dernière étape :
Modifier le fichier .angular-cli.json
« styles »: [
« styles.css »,
« project-theming.scss »
],
Relancer le serveur de nouveau à l’aide de la commande
ng serve
Et voilà notre thème personnalisé Material a été importé et utilisé.
Vous trouvez le code source de projet (Material / Angular 5) sur github : Material & Angular 5 en libre service