Exibir código-fonte para Installing Angular Material

Angular Material has some great components ready to use in your project: https://material.angular.io/


== Configuration ==


'''1) Install Angular Material'''
<source lang="bash">
npm install --save @angular/material
npm install --save @angular/cdk
</source>

Go to your index.html and add this inside '''<head>''':

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

Create a MaterialModule class:

<source lang="javascript">
import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}
</source>

Go to your modules file and import '''MaterialModule''':

<source lang="javascript">
import { MaterialModule } from './material.module';
</source>

Add '''MaterialModule''' module to '''imports''' section of '''NgModule'''.


'''2) You may also need to import Angular Animations:'''

<source lang="bash">
npm install --save @angular/animations
</source>

Go to your modules file and import '''BrowserAnimationsModule''':

<source lang="javascript">
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
</source>

Add '''BrowserAnimationsModule''' module to '''imports''' section of '''NgModule'''.


'''3) And also gestures library:'''

<source lang="bash">
npm install --save hammerjs
</source>

Go to your modules file and import '''BrowserAnimationsModule''':

<source lang="javascript">
import 'hammerjs';
</source>


'''4) Also, you may install Angular Flex layout:'''
<source lang="bash">
npm install --save @angular/flex-layout
</source>

Go to your modules file and import '''FlexLayoutModule''':

<source lang="javascript">
import { FlexLayoutModule } from '@angular/flex-layout';
</source>

Add '''FlexLayoutModule''' module to '''imports''' section of '''NgModule'''.


== View example ==

<source lang="xml">
<mat-toolbar color="primary">
    <span>Ristorante Con Fusion</span>
</mat-toolbar>
</source>

== In your main scss file ==

<source lang="css">
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
</source>


[[Category: Angular]]