How to add Angular Material in your Angular Apps

Every day we want to create beautiful apps, but we don't have time to create great interfaces. This kind of situation can be resolved using Angular Material.

The Angular Material is a node package created by Angular Team members. Using Google Material behavior and animations. It brings with some angular components ready to use.

Adding Angular Material

Be sure are you using the last version of @angular/cli. This allows creating apps quickly if you don't have any app already created, feel free to create one.

danyiMac:lab$ ng new myexampleApp

The ng add command allow install and configure our project with Angular Material

danyiMac:lab$ ng add @angular/material

What did ng add for me?

The ng add did the following actions for us, let me explain.

Imported BrowserAnimationsModule into our app.module.ts.

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

Added reference into the angular.json to the prebuilt themes.

{ "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css" },

Included into the package.json angular/material and angular/cdk dependencies.

"@angular/material": "^6.4.7", "@angular/cdk": "^6.2.0"

Set Roboto as default font and some margins into our main styles.css.

html, body { height: 100%; } body { margin: 0; font-family: 'Roboto', sans-serif; } html, body { height: 100%; } body { margin: 0; font-family: 'Roboto', sans-serif; }

Added into index.html link to Google font Roboto and Material Icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

That’s it! our app is ready to use Angular Material!

#angular