Setting up your first Angular (2) Project Using Angular Material (2)

This article is part 1 of a 4 part series of using Angular Material2 in your Angular (2) Angular-CLI project.

Part 1 (this article) Setting up your first Angular (2) Project Using Angular Material2 (1/4)

Part 2 Using Angular Material2 Components in your Angular (2) Project — Intro, Custom Styles, Buttons & Indicators (2/4)

Part 3 (coming soon) Using Angular Material2 Components in your Angular (2) Project — Popups, Modals, and Navigation (3/4)

Part 4 (coming soon) Using Angular Material2 Components in your Angular (2) Project — Form Controls (4/4)

This article will show you how to set up your Angular (2) project using Angular Material2, and preparation needed to use components in your application. We will cover initial setup and default theming.

Angular Material2 has become significantly easier to use since their early alpha days. Two changes I’m thankful for are the Material Module, which allows you do use all components in the library vs having to import each individual component separately and the theming functionality so you can have a global app theme for your project instead of having to define themes for each individual component if you don’t want to.

For reference, I’m using Angular 2.4.6, Angular-CLI 1.0.0-beta.30, and Angular Material2 2.0.0-beta.1.

Get Started

In an Angular-CLI project, go ahead and npm install -S @angular/material.

Then, in your app.module.ts file, go ahead and import the Material Module…

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

and add it to your imports array…

MaterialModule.forRoot()

Your app.module.ts file should look like this.

Installing HammerJS

If you plan on using slide toggle or slider, these components have a dependency on hammerjs. If you don’t plan on it, you can skip to the next paragraph. :)

Do that npm install jam.

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

In your app.module.ts, make sure to import hammerjs.

import 'hammerjs';

In your tsconfig.json, add hammerjs to the types section.

"types": [
"hammerjs"
]

Adding Roboto Font & Material Icons

It’s important to note that material design styles are encapsulated within the Angular Material2 components, therefore you’ll have to add the material design font, Roboto and Material Icons to your styles.css file.

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~https://fonts.googleapis.com/icon?family=Roboto';
body {
font-family: Roboto;
}

Just to make sure everything is working okay, once you press save and your local server refreshes, the font should change to Roboto font. Here’s the before/after.

before adding roboto font to the body of your app
after adding roboto font

Theming in Angular Material2

Late 2016, the Angular Material2 team added global theming. The docs for theming is here in case you want to read through it.

Here’s how theming works! In the styles, you choose a few default themes that are included.

If you are in an angular-cli project, you can simply go to /node_modules/angular/material/core/theming/prebuilt and see your options for default themes.

At the time of this post, we have the following available:

deep purple / amber,

indigo / pink,

pink / bluegrey,

purple / green

The first color listed is the primary color (in the cast below, indigo) and the second color listed (pink) is the accent color.

In your styles.css, add this import.

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

If you’re curious to do create custom theming, check out the docs to figure out how here.

And if you do do custom themes, or want to test out the default themes, one of my favorite sites to get a visual is Material Palette, which helps you pair and compare standard Material Design colours easily. Try it out! :)

PS, here is a link to all the colours in Angular Material2 on Github.

Making Sure Your Theming Works

Now that you’ve got everything set up, let’s just make sure everything works by adding a component and use the theming so you can move on to get productive.

I simply added a few buttons to my app.component.html and specified either the primary or accent colour.

<div>
<a md-button color="primary">Flat button</a>
<a md-raised-button color="accent">Raised button</a>
<a md-fab color="primary"><md-icon>check</md-icon></a>
<a md-mini-fab color="primary"><md-icon>check</md-icon></a>
</div>

The result of your code should look like this.

If for some reason colours are not showing properly or components look off, then you’ll need to troubleshoot your code a bit to figure out what went wrong! Killing your server and restarting it is always a good start. Or making sure your server is running. ;)

You can always look at the app that I created to write this blog post or just clone the master branch and use it for your project if you don’t want to spend time configuring. It’s on github here.

Read Part 2 and get an intro on how to use Angular Material2 components in your app, create custom styles, and how to use buttons & indicators.

PS you can find me on twitter @ladyleet or at a local conference! Find my schedule at ladyleet.com.