How to Use Angular Material 2 in Angular 4+ Project

By
Dhaanappagouda Patil
-
0
2813
views

This article will show you the more easier way of making use of Angular Material 2 components in your project.

How to Use Angular Material 2 in Angular 4+ Project

Create a new Angular project using Angular CLI

ng new MateriaProject

Install Angular Material and Angular CDK

Using npm package manager you can install Angular CDK and Angular Material

npm install --save angular/material2-builds angular/cdk-builds

Install Angular Material Animations

Some of the Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations

Import Angular Animations in app.module.ts file and include it at under imports of @NgModule decorator.

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

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

Don’t forget to include one of the themes of Angular Material themes in the Global styles.css file

something like this

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

Create a separate material.module.ts file to import all the required material modules in your project

you can make use most of the modules I used in the project.

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

import { MatButtonModule, 
  MatToolbarModule,
  MatInputModule, 
  MatProgressSpinnerModule, 
  MatCardModule, 
  ShowOnDirtyErrorStateMatcher, 
  MatStepperModule  } from '@angular/material';

import {MatFormFieldModule} from '@angular/material/form-field';//dashboard,website
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from '@angular/material/list';
import {MatRadioModule} from '@angular/material/radio';
import {MatDatepickerModule, MatNativeDateModule} from '@angular/material';
import {ErrorStateMatcher} from '@angular/material/core';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatIconModule} from '@angular/material/icon';
import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatDialogModule} from '@angular/material/dialog';
import{MatChipsModule} from '@angular/material';
import{MatTabsModule} from '@angular/material';

import {MatTooltipModule} from '@angular/material/tooltip';

@NgModule({
  imports: [
      MatButtonModule,
      MatToolbarModule,
      MatInputModule, 
      MatProgressSpinnerModule, 
      MatCardModule,
      MatFormFieldModule,
      MatSelectModule,
      MatSidenavModule,
      MatListModule,
      MatRadioModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatCheckboxModule,
      MatIconModule,
      MatTableModule,
      MatPaginatorModule,
      MatDialogModule,
      MatStepperModule,
      MatChipsModule,
      MatTabsModule,
      MatTooltipModule
    ],
  exports: [
      MatButtonModule,
      MatToolbarModule,
      MatInputModule,
      MatProgressSpinnerModule, 
      MatCardModule,
      MatFormFieldModule,
      MatSelectModule,
      MatSidenavModule,
      MatListModule,
      MatRadioModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatCheckboxModule,
      MatIconModule,
      MatTableModule,
      MatPaginatorModule,
      MatDialogModule,
      MatStepperModule,
      MatChipsModule,
      MatTabsModule,
      MatTooltipModule
    ],
    providers: [
      {provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
    ]
})
export class MaterialModule { }

Mention the created same material.module.ts file in the main app.module.ts file

and don’t forget to include it at under imports of @NgModule decorator also.

something like this
import { MaterialModule } from './material.module';
@NgModule({
  declarations: [
    AppComponent,
  ],
  
  imports: [
    HttpClientModule,
    CommonModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,  
  ],
  
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import all the material icons in the index.html file

put this script tag under the head tag of index.html file.

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

That’s it your project is now good to with angular material 2 any doubts and query ask in the comments.

How to Use Angular Material 2 in Angular 4+ Project

Happy Coding!

RELATED ARTICLESMORE FROM AUTHOR