Getting started with Material Design 6 in Angular 6

In this first part of a tutorial series to get started with Material Design 6 in Angular 6, we are going to cover how to install and add support for Material 6 to an Angular 6 project, generated using the Angular CLI 6.

Getting Started

First of all, make sure you have created an Angular 6 project using the Angular CLI 6.

Then use your terminal or command prompt to install the required npm package to add support for Angular Material 6.

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

Next you'll need to add the Angular Material Module to your app module app.module.ts

So start by importing it:

import { MaterialModule } from '@angular/material';

Then simply add it to the imports array:

      declarations: [
      imports: [
      providers: [],
      bootstrap: [AppComponent]
    export class AppModule { }

Some components depend on hammerjs so you need also to install these dependencies:

npm install --save hammerjs  
npm install --save-dev @types/hammerjs

Then make sure to import hammer in app.module.ts

    import 'hammerjs';

Next open and add hammerjs to types array:

    "types": [

There is one more little thing that you need to do to make Material Design 6 work properly.

Open your project styles.css and import the Roboto font and Material icons then set Roboto as the font for body element:

    @import '~';
    @import '~';
    body {
        font-family: Roboto;

That's because Material 6 components depend on these resources.

Adding a theme

Before using the Material components, we need to add a theme. There are many built in themes available with the default installation of Angular Metarial2 that are available from /node_modules/angular/material/prebuilt-themes/ folder.

Make sure to look there for all available themes then choose one an import it in project styles.css file:

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

Now you are good to go!

Testing with Material Card Component

If you have successfully installed and configured Material2, you can now test some of its components to make sure everything is ok.

Open app.component.html then add these examples:

    <md-card >
        <md-card-header>Example MD Card</md-card-header>
        <button md-button>A Button </button>
        <button md-raised-button>Another Button </button>
        <button md-raised-button color="primary">A 3rd Button</button>

        <button md-raised-button color="accent">The 4th Button</button>

          <button md-fab>
            <md-icon>add circle</md-icon>



That's all for this first part, we have seen how to install and setup the required packages to work with Material Design in Angular 6.

On this next part we are going to see some examples so stay tunned!

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status