Installing Angular Material

From Basef
Jump to: navigation, search

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


Configuration

1) Install Angular Material

npm install --save @angular/material
npm install --save @angular/cdk

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

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

Create a MaterialModule class:

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 {}

Go to your modules file and import MaterialModule:

import { MaterialModule } from './material.module';

Add MaterialModule module to imports section of NgModule.


2) You may also need to import Angular Animations:

npm install --save @angular/animations

Go to your modules file and import BrowserAnimationsModule:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Add BrowserAnimationsModule module to imports section of NgModule.


3) And also gestures library:

npm install --save hammerjs

Go to your modules file and import BrowserAnimationsModule:

import 'hammerjs';


4) Also, you may install Angular Flex layout:

npm install --save @angular/flex-layout

Go to your modules file and import FlexLayoutModule:

import { FlexLayoutModule } from '@angular/flex-layout';

Add FlexLayoutModule module to imports section of NgModule.


View example

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

In your main scss file

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