Getting Started- Material Design Components for Angular

So, you might’ve been stuck with installing and integration of material design theme with Angular. Here is the quick and definitive guide for Material design with Angular.

1. First install Angular Material, Angular CDK and Angular Animations using below command in NPM.

npm install — save @angular/material @angular/cdk @angular/animations

2. Once the animations package is installed, import BrowserAnimationsModule into your application to enable animations support.

Also import MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule and MatRippleModule.

Make sure to export MatButtonModule, MatFormFieldModule, MatInputModule and MatRippleModule.

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

import { MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from ‘@angular/material’;

@NgModule({

…

imports: [BrowserAnimationsModule,

MatCheckboxModule,

MatButtonModule,

MatFormFieldModule,

MatInputModule,

MatRippleModule,

],

…

})

exports: [MatButtonModule,

MatFormFieldModule,
MatInputModule,
MatRippleModule
]

3. Now include a theme: Including a theme is required to apply all of the core and theme styles to your application. Use Angular CLI, to add this to your styles.css:

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

Or you can simply include the below link in the index.html

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

4. Gesture Support: In order to get the full feature-set of some components those rely on HammerJs for geture, HammerJS must be loaded into the application.

To install via npm, use the following command:

npm install — save hammerjs

5. After installing, import it on your app’s entry point (e.g. src/main.ts).

import ‘hammerjs’;

6. Add Material Icons: If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html.

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

7. Sometimes you might face multiple warning error while compiling the code. May be your version of Angular and material design is conflicting. there id a simple hack make change in all the installed material file as per your Angular version, as I’ve made changes in my package.json file.

“@angular/animations”: “⁷.2.0”,

“@angular/cdk”: “⁷.2.0”,

“@angular/common”: “~7.2.0”,

“@angular/compiler”: “~7.2.0”,

“@angular/core”: “~7.2.0”,

“@angular/forms”: “~7.2.0”,

“@angular/material”: “⁷.2.0”,

“@angular/platform-browser”: “~7.2.0”,

“@angular/platform-browser-dynamic”: “~7.2.0”,

“@angular/router”: “~7.2.0”,

“@angular/compiler-cli”: “~7.2.0”,

“@angular/language-service”: “~7.2.0”,

Finally, run npm install and then try to run this

<form class=”example-form”>
<mat-form-field class=”example-full-width”>
<input matInput placeholder=”Favorite food” value=”Sushi”>
</mat-form-field>

<mat-form-field class=”example-full-width”>
<textarea matInput placeholder=”Leave a comment”></textarea>
</mat-form-field>
</form>

code in app.component.html using material design theme. You’ll get below output on your localhost:4200.

So, here you are ready for start designing the material design theme on Angular.