Angular : Mettre en place et utiliser Angular Material 2

J’ai commencé à créer un projet Angular 2 pour générer une application mobile en ligne ; du coup j’ai commencé à chercher un peu les frameworksMaterial que je pourrais utiliser et je suis tombé sur Angular Material.

Angular Material offre quelques composants de base pour créer rapidement une interface graphique visuellement agréable.

Utiliser Angular Material 2 dans un projet Angular

A noter que je ne parle pas ici d’AngularJS ni d’AngularJS 2 mais d’Angular, tout court, en version 2 (et bientôt 4).

Vous voulez créer un projet avec Angular Material 2 from Scratch (en partant de zéro)

Si vous n’avez pas déjà Angular-CLI d’installé.

npm install -g @angular/cli

(à utiliser avec sudo devant sous Linux)

Rendez-vous dans votre dossier de projet, puis générez une nouvelle architecture pour Angular 2.

ng new mon-projet-angular2

Il va se charger de créer un mini-squelette pour votre projet Angular 2 et d’y ajouter les packages NPM requis, puis les installera.

Installer Angular Material 2

Dans votre projet, lancez la commande suivante (–save vous permet d’enregistrer le paquet dans le fichier package.json).

npm install --save @angular/material

Une fois Angular Material installé, vous devez le mettre dans votre fichier app.module.ts.

src/app/app.module.ts

Inclure Angular Material dans le fichier (si vous utilisez VSCode, je vous recommande vivement l’utilisation de TypeScript Importer).

import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [MaterialModule],
  ...
})

Utiliser Angular Material dans son projet

Sachez que vous allez devoir choisir un style CSS à appliquer de base sur votre projet, sinon certains composants ne fonctionneront pas.

Soit dans le fichier styles.css, utilisez un import (recommandé si utilisation d’angular-cli)

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

Ou directement dans le fichier index.html.

<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

Les thèmes disponibles sur Angular Material

Voici la liste des thèmes actuellement disponibles (dans Angular Material version 2.0.0-beta.2).

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

Pour commencer à utiliser les composants Angular Material

Angular Material et HammerJS

Pour que certains composants fonctionnent au mieux, Google recommande l’utilisation d’HammerJS.

• md-slide-toggle
• md-slider
• mdTooltip

Pour installer HammerJS au côté d’Angular Material.

npm install --save hammerjs

Dans le fichier src/app/app.module.ts

import 'hammerjs';

Utiliser les icônes Material de Google

Simplement ajouter le lien vers leur sources.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Source : Getting Started with Angular Material 2