Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

How to Build an Angular 5 Material App

By Gary simon - Nov 09, 2017

Ready to build Awesome Angular Apps?

A Free Course, Free Tutorials and Full App Development Courses!

Great! Check your email

I've just sent you the first email to get you started.

Angular Material has recently been updated, so our previous tutorial is outdated. Angular 5 has also just released, so it's worth revisiting this topic to get everyone up to date with Angular + Material!

As always, this tutorial is project-based and is meant to serve as a simple starting-point from which you can confidently go forward, and learn more about Angular Material on your own.

Let's get started.

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Creating a New Angular 5 Project

We're going to use the Angular CLI to start this project, and I'm assuming you already have it installed. If you don't, please watch our Angular 5 Tutorial course series.

$ ng new ng5-material --routing

Once it's finished installing, hop into the directory and serve it with the CLI:

$ cd ng5-material
$ ng serve

Integrating Material

Open up a new console or command window and run the following command to use npm to install material:

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

Some of the material components use the Angular animation library, which is also installed separately via npm:

$ npm install --save @angular/animations

Let's integrate the freshly installed animations library to our /src/app/app.module.ts file:

// Other imports removed for brevity
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

Next, for each material component we want to use in our project, we have to import it into the imports array of ngModule above.

If you only have a couple components, you could import them directly into this file. However, for purposes of organization and keeping your AppModule brief, you can create a custom module specifically for your material component imports. We'll do that.

Create a new file /src/app/material.module.ts and paste the following contents:

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

@NgModule({
  imports: [MatButtonModule],
  exports: [MatButtonModule],
})
export class MaterialModule { }

Here, we're only including the MatButtonModule, but we'll add more to this later. 

Next, back in app.module.ts we import it by adding:

// Other imports removed for brevity
import { MaterialModule } from './material.module';

@NgModule({
  ...
  imports: [
    ...,
    BrowserAnimationsModule,
    MaterialModule
  ],
  ...
})
export class AppModule { }

Whew, we're just about ready to go!

The next required step is to include an Angular Material theme. A theme provides a set of predefined colors that will be applied to your material design components.

The colors consist of:

  • Primary colors
  • Accent colors
  • Warning colors
  • Foreground colors
  • Background colors

At the time of writing this tutorial, there are 4 predefined themes from which you can choose:

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

To integrate one, visit the /src/styles.css file and paste the following line at the top:

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

Next, we need to include *HammerJS for gesture support, as some components require this for full-feature support.

In the console, type:

$ npm install --save hammerjs

To include this, we add it to the /src/main.ts entry point as an import:

// Other imports removed for brevity

import 'hammerjs';

Finally, if you're going to use any Material Design Icons (they are used quite frequently throughout material), we need to import Material Icons in the /src/index.html file between the head tags: 

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

We're ready to go!

Testing it out

That was a lot of setup! Let's make sure it works by checking out the Angular Material Button component.

Visit the /src/app/app.component.html and remove all of the HTML and replace it with:

<button mat-button>My Button</button>

<router-outlet></router-outlet>

Save it, and visit http://localhost:4200 in the browser. Your result should look like this:

Hover over the result and it will present you with this gray background, and if you click on it, you will see an animation.

This means that Angular Material has been installed correctly and you're ready to use all of the components!

Integrating and Using Angular 5 Material Components

The process of using Material components in your Angular app is very straight forward. While we're not going to cover every component here, but I am going to show you how you can use the official documentation to use any component you wish.

Take a look at the Angular Material Documentation for components. Let's say we want to start off by integrating a toolbar.

Click on Navigation > Toolbar.

The layout for each component is structured similarly:

At the top, we have a tabbed navigation:

  • OVERVIEW
    This provides you with a basic overview and options associated with the given component.

  • API
    This provides you with a line of how to import the component. In our case, this is within /src/app/material.module.ts. It also provides you with the directives that you use.
  • EXAMPLES
    And this provides you with examples of how to use the given component. You can click on the coding < > icon to see the HTML structure associated with the component examples.

So, if we want to integrate the toolbar component, we first visit the API tab. We can see it's called MatToolbarModule.

We add this to the import line and the ngModule within /src/app/material.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatToolbarModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatToolbarModule],
  exports: [MatButtonModule, MatToolbarModule],
})
export class MaterialModule { }

Next, visit the /src/app/app.component.html template and add:

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>MyMaterial</span>

    <span class="example-spacer"></span>
    
    <button mat-button>About</button>
    <button mat-button>Services</button>
    <button mat-button>Contact</button>
  </mat-toolbar-row>
</mat-toolbar>

In the documentation examples, if you click the < >  icon, you will notice it has tabs for HTML, TS, and CSS.

The CSS tab has a couple rulesets needed for the above example to fully work. Visit the /src/app/app.component.css file and paste in the contents:

.example-icon {
  padding: 0 14px;
}

.example-spacer {
  flex: 1 1 auto;
}

Save the project and view the result in the browser:

And that's the process of integrating and using components in Angular 5. Let's give ourselves some muscle memory by adding more to our sample project.

Bringing it All Together

Let's use a few different components together. We're going to create a very simple form and a submit button contained inside of a material card. When an answer is given and the button clicked, we will show the material spinner component for a couple seconds, and then show the result in the template.

Once again, looking at the Cards Documentation in the API tab for form inputs, spinners and cards, the following libraries must be imported into our material.module.ts file:

...
import { ..., MatInputModule, MatProgressSpinnerModule, MatCardModule } from '@angular/material';

@NgModule({
  imports: [..., MatInputModule, MatProgressSpinnerModule, MatCardModule],
  exports: [..., MatInputModule, MatProgressSpinnerModule, MatCardModule],
})
export class MaterialModule { }

Then, in our app.component.html we can add:

<mat-card>
  <mat-form-field>
    <input matInput [(ngModel)]="answer" placeholder="Who has the best dev tutorials?">
  </mat-form-field>

  <br>
  
  <button mat-raised-button (click)="showAnswer()">Answer me</button>
  <mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
</mat-card>


<mat-card *ngIf="answerDisplay">
  <h1>{{ answerDisplay }}, you're damn right.</h1>
</mat-card>

First, we're using the mat-card component, and then an input with 2-way data binding through ngModel. Then, we have a material button with a click event bound to a method we need to define called showAnswer().

We have mat-spininer which is using style binding to set the display property to block if the property showSpinner is true, and to none if it's not.

Beneath that, we have another mat-card only presenting if answerDisplay is set. You'll see how this all works once we get to the component logic.

Before we do that, we have to import the FormsModule in order to have access to ngModel.

Open up /src/app/app.module.ts and import:

...
import { FormsModule } from '@angular/forms';

@NgModule({
  ...
  imports: [
    ...,
    FormsModule
  ],
  ...
})
export class AppModule { }

Then, visit /src/app/app.component.ts and specify the following code in the class:

export class AppComponent {
  
  answer: string = '';
  answerDisplay: string = '';
  showSpinner: boolean = false;

  showAnswer() {
    this.showSpinner = true;

    setTimeout(() => {
      this.answerDisplay = this.answer;
      this.showSpinner = false;
    }, 2000);
  }

}

Simple enough!  We're using setTimeout() to simulate an API call, just so that we can see the actual material spinner for awhile.

Conclusion

As you can see, working with Angular 5 Material is surprisingly easy. It's just a matter of understanding the documentation formatting, and going from there.

Enjoy!

 


Share this post




Say something about this awesome post!