ECOM 1F0 2018-19 BTB Angular Material

Présentation

Angular Material est une suite de components Angular facilitant l'implémentation d'application Angular respectant le Material Design. Ce standard étant propulsé par Google au même titre que Angular, l'intégration de Angular Material est largement facilitée.

Installation

La page Getting started de la documentation est très bien faite.

Utilisant npm, nous avons procédé comme suit :

cd <dossier du projet>
npm install --save @angular/material @angular/cdk @angular/animations

Ajout dans app.module.ts de

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

Création d'un module MaterialModule :

import {MatButtonModule, MatCheckboxModule, //every used MatXXXModule} from '@angular/material';
@NgModule({
  imports: [MatButtonModule, MatCheckboxModule, //every used MatXXXModule],
  exports: [MatButtonModule, MatCheckboxModule, //every used MatXXXModule],
})
export class MaterialModule { }

Import du MaterialModule dans app.module.ts

...
import { MaterialModule } from './material';
@NgModule({
  ...
  imports: [
    ...
    MaterialModule
    ...
  ],
  ...
})
export class AppModule { }

Import d'un thème Material Angular existan, dans styles.css :

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Installation hammerjs

npm install --save hammerjs

Ajout de hammerjs à src/main.ts :

import 'hammerjs';