Create your account

Already have an account? Login here

Create account

Angular 4 Material Tutorial

By Gary simon - May 14, 2017

Looking to integrate Google's Material Design in your Angular 4+ app? Look no further! 

I created a tutorial a few months ago based on this very subject, except it was for Angular 2. Now, we need to revisit this topic because a few things have changed and that tutorial is now outdated.

First, if you prefer watching a video instead

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome design and development videos.

Generating a Project

I like to start from scratch with these tutorials. So, I'm going to use the Angular CLI to generate a new project. If you're new to Angular and the CLI, check out our Free Angular Course (version 4).

Hop into the command line:

> ng new ng4-material

Once finished:

> cd ng4-material

Installing Dependencies

We're going to take care of installing all of the necessary dependencies in one command. I'll explain beneath:

> npm install --save @angular/material @angular/animations

So, we have 2 packages being installed here.

    • @angular/material
      This is the official Material package for Angular.

    • @angular/animations
      New to version 4 is the necessity of installing animations separately from the angular core library. Certain Material components need access to the animations library, which is why we're installing it here.

 

 Let's also run and watch our app:

> ng serve

Open our the /src/app/app.module.ts file and import the packages that we just installed:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule } from '@angular/material';

Okay, so a lot is happening here. First, we're importing the animations package.

The next import is what's unique to Angular 4 Material. Before, we just included a single MaterialModule. Now, we have to import each component that we intend to use.

As you can see, I've added 6 different modules here for material buttons, cards, menus, toolbars and icons.

Now, let's add each of these as imports in the @NgModule:

@NgModule({
  // Other properties removed from brevity
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule
  ],
  
})

Go ahead and save this file.

You might be wondering though, how did I know the names of the modules to import? Well, I read the official angular material documentation of course!

If you click on any of the components on the left menu, and then click on the API REFERENCE tab, it provides you with the exact import line that you need to use.

In terms of setup, that's all that we need to do to before we actually begin using and integrating material components into our templates.

You just have to remember to import each unique component that you plan on using. 

While this tutorial will not go in-depth in terms of covering Material components, we will setup a real quick example just so you can get your feet wet.

Some quick work in the component

We're going to use JSONPlaceholder to feed us some dummy JSON data for our app. This site provides you with a public API to help test and build your app.

To access the API, we have to import the Http library in our /src/app/app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

Then, in the AppComponent class, let's add:

export class AppComponent {
  myData: Array<any>;

  constructor(private http:Http) {
    
    this.http.get('https://jsonplaceholder.typicode.com/photos')
      .map(response => response.json())
      .subscribe(res => this.myData = res);

  }
}

We're defining a property myData as an array, and then in the constructor we're creating an http instance through dependency injection.

Then, we're using that instance to grab JSON from the JSONPlaceholder API.

Save the file.

Defining a Default Material Style

In our /src/styles.css file, which is generated by the Angular CLI, let's add the following:

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

body {
    padding: 2em 23em;
    background:lightgray;
}

Based on your preferences, you can change indigo-pink.css to:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

I'm also adding some CSS to the body tag only for demonstrating this layout. This helps it look more like an app, even on a desktop.

Let's also add 2 lines to our /src/index.html file just before the closing </head> tag:

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

This is importing the material design icon font, and also the Roboto font, which is used by Material design.

Defining a Template

In /src/app/app.component.html let's start off by adding a toolbar through md-toolbar:

<md-toolbar color="primary">

    <span>MyCompany</span>
    <span class="example-spacer"></span>
    <button md-button [mdMenuTriggerFor]="appMenu"><md-icon>menu</md-icon> Menu</button>
    
</md-toolbar>

<md-menu #appMenu="mdMenu">
  <button md-menu-item> Settings </button>
  <button md-menu-item> Help </button>
</md-menu>

This is what your app should look like in the browser:

And when you click on the menu button:

Underneath the menu, let's use *ngFor to display some of the photos we're pulling from the API, in card-format:

<md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,10): []); let i = index">

  <img md-card-image src="{{ data.url }}">
  <md-card-header>
    <md-card-title>{{ data.title }}</md-card-title>
  </md-card-header>

  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
  
</md-card>

We're using *ngFor along with a .slice function to only return 10 results; otherwise, we will get over 5,000.

We're also defining a local variable of i for the index, in case you want to do something specific with the result, such as making the like or share buttons function. We won't be doing that though, because that extends beyond the scope and purpose of this tutorial.

Now, your app should look like this:

Conclusion

And that's really all there is to it! An entire course could be dedicated to illustrating the usage of all the various Material components, but that's not really what I wanted to do here.

As I mentioned earlier, I created this tutorial to help you understand how to integrate Material in Angular 4+, being that the process has changed since Angular 2.

In the future, I may do a course specifically on building an app using Angular Material. If you would like to see that, let me know in the comments!

In the mean time, the Angular Material documentation is pretty solid. It provides you with an overview of each component, an API and an example.

Good luck everyone!


Share this post

Chat with us




Say something about this awesome post!