Adding Angular Material 2 to your Angular 4 Project

We have already created a new Angular 4 cli  project in our previous post: Cloud Based Angular 4 New Project Tutorial.  Next we will go through the steps to add Angular Material Design to the project.

Angular Material

According to the Angular Material team:

Our goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

What do we mean by “high-quality”?

  1. Internationalized and accessible so that all users can use them.
  2. Straightforward APIs that don’t confuse developers.
  3. Behave as expected across a wide variety of use-cases without bugs.
  4. Behavior is well-tested with both unit and integration tests.
  5. Customizable within the bounds of the Material Design specification.
  6. Performance cost is minimized.
  7. Code is clean and well-documented to serve as an example for Angular devs.

Sounds great right?

Install and Update Required Packages for Angular Material 2

  1. Open a Terminal and CD into your project folder
  2. Install angular material, from the command line type $ npm install -S @angular/material.
    As you can see below, at the time of this post Material 2 was in beta 3:

    Install Angular Material
    Install Angular Material
  3. Next install Angular Animations by typing $ npm install --save @angular/animations
    As you can see from the output our current version of @angular/core of 4.0.0 must be bumped to 4.0.3.

    Install @angular.animations
    Install @angular.animations
  4. The following packages versions were bumped up from 4.0.0 to 4.0.3 in the package.json file. The output from running $ npm install outputs the angular packages that have been updated.

    Update Angular 4.0.0 packages to 4.0.3
    Update Angular 4.0.0 packages to 4.0.3
  5. There is an optional dependency on hammer.js for touch support in your app.    In the command line type $npm install -S hammerjs and npm install --save-dev @types/hammerjs

Update app.module.ts and tsconfig.json for Material2

    1. Open the app.module.ts and add the following:

      Import angular material and angular browser animations
      Import angular material and angular browser animations

       

    2. Update tsconfig.json adding types array property with hammerjs

      Add hamerjs to typings
      Add hamerjs to typings

Material2 Theming

A recent addition to Angular Material is global theming which includes a few pre-built themes found at  /node_modules/angular/material/core/theming/prebuilt. At the time of this post, there were four default themes available being deeppurple-amber, indigo-pink, purple-green and pink-bluegrey. The naming convention used for a naming a theme is [primary color]-[Accent color].  So for deeppurple-amber, purple would be primary color and amber would be the accent color.  To include a theme simply add the following to your stylesheet: @import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;

To leverage Material Design icons and use the icons components with the <md-icon> syntax you will need to add the following to your global stylesheet:
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

It is also recommended that the Google design font Roboto also be imported by also adding:
@import '~https://fonts.googleapis.com/icon?family=Roboto';

The updated global styles.css should include the following:

Add imports to global stylesheet
Add imports to global stylesheet

Adding a Material Design Icon

So the project builds and runs no problem.  To insure we have all the required pieces let’s try and update a component to use an Angular Material directive.  I happen to think the Material Icons are extremely useful and cool so we will begin by adding a md-icon directive to our home page.  All the available icons  can be seen at Material.io icons.

So if I add <md-icon>cloud_circle</md-icon>{{title}} to the app.component.html, the page will refresh and I will see the following:

Wow, easy as that!
Wow, easy as that!

 

The Next Post will go into extending the app leveraging Material design concepts.



1 Comment

Leave a Reply