Premiers pas avec angular-material2

Emballage de tous les modules ensemble

Vous pouvez également facilement regrouper tous les modules angulaires que vous allez utiliser dans un seul module :

import { NgModule } from '@angular/core';
import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
 
@NgModule({
    imports: [
        BrowserAnimationsModule,
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ],
    exports: [
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ]
})
export class MaterialWrapperModule {}

Après cela, importez simplement votre module dans le module principal de l’application :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { MaterialWrapperModule } from './material-wrapper.module.ts';
import { AppComponent } from './app.component';


@NgModule({
    imports: [
        BrowserAnimationsModule, 
        MaterialWrapperModule,
        CommonModule,
        // This is optional, use it when you would like routing in your app
        // RouterModule.forRoot([
        //     { path: '', component: HomeView, pathMatch: 'full'}
        // ])
    ],
    declarations: [ AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

Installation et configuration depuis le maître avec Angular CLI

Cet exemple montrera comment installer à partir du maître et utilisera également @angular/cli.

  1. Créez un nouveau projet avec @angular/cli :
   ng new my-master-app

Si vous n’avez pas installé @angular/cli, utilisez cette commande :

   npm install -g @angular/cli
  1. Installer à partir de master :
   npm install --save @angular/animations
   npm install --save angular/material2-builds
   npm install --save angular/cdk-builds
  1. Suivez le même guide que ci-dessus.

Fait!

Installation ou configuration avec Angular CLI

Dans cet exemple, nous utiliserons @angular/cli (dernière) et la dernière version de @angular/material. Vous devez au moins connaître les bases d’Angular 2/4 avant de poursuivre les étapes ci-dessous.

  1. Installez le module de matériau angulaire à partir de npm :
   npm install @angular/material --save

Cela ne s’applique qu’aux versions 2.0.0-beta.3 et supérieures.

Installez le module @angular/animations :

npm install @angular/animations --save

Cela ne s’applique qu’aux versions 2.0.0-beta.8 et supérieures.

Installez le module @angular/cdk :

npm install @angular/cdk --save
  1. Dans votre module applicatif importez les composants que vous allez utiliser :

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
    
    import { AppComponent } from './app.component';
    
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
         imports: [
             BrowserAnimationsModule,
             MdButtonModule,
             MdSnackBarModule,
             MdSidenavModule,
             CommonModule,
             // This is optional unless you want to have routing in your app
             // RouterModule.forRoot([
             //     { path: '', component: HomeView, pathMatch: 'full'}
             // ])
         ],
         declarations: [ AppComponent ],
         boostrap: [ AppComponent ]
    })
    export class AppModule {}
    

Vous êtes maintenant prêt à utiliser Angular Material dans vos composants !

Remarque : les documents pour des composants spécifiques seront bientôt disponibles.

Configurer le thème, la prise en charge des gestes et les icônes matérielles


Thème:

Un thème est requis pour que les composants matériels fonctionnent correctement dans l’application.

Angular Material 2 propose quatre thèmes prédéfinis :

  • violet profond-ambre
  • rose indigo
  • rose-bleu gris
  • Violet vert

Si vous utilisez Angular CLI, vous pouvez importer l’un des thèmes prédéfinis dans style.css.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Le thème peut également être ajouté en utilisant <link> dans index.html.

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

HammerJS

Ajoutez HammerJS à l’application via [CDN][2] ou npm :

npm install --save hammerjs

Dans votre module racine, généralement app.module.ts, ajoutez l’instruction d’importation :

import 'hammerjs';

Icônes de matériau :

Sauf si des icônes personnalisées sont fournies, Angular Material 2 <md-icon> attend des icônes de matériau.

Dans index.html ajouter :

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

[1] : https://material.angular.io/guide/theming [2] : https://developers.google.com/speed/libraries/#hammerjs