Quick Guide: Install Angular2 and Material2 with angular cli

4 min readJan 3, 2017

I was struggling a while ago with setting up a working Angular2 app with googles Material design as main layout platform.

This is why I decided to make a quick guide (which essentially is a bullet list combined with images) how to install it. You will need a working npm and node.js installation.

First of all a warning which is really meant as an well-intentioned advice:
All Material2 components are still in an Alpha version. This means not everything will work like you expect. E.g: the component <md-grid-list> is not supporting responsive functionality at the moment. This could be a huge problem especially when it comes to mobile first applications.

I am not going to explain how Angular2 works or basics like how to install npm/node.js. This guide will only help you to setup a clean Angular2/Material2 project with the help of angular-cli:

Install Angular-Cli globally

$ npm install -g angular-cli

Create a new Angular2 project

$ ng new todo-app

Now you have a completely working Angular2 app. Angular-Cli takes care of creating the necessary structure including test and environment functionality. If you want to learn more about that structure in general and the purpose of all the created files feel free to read the following tutorial:

Create a CRUD App

But we are not done at that point. Let’s add the material2 layout to the app:

Install material components to the project

$ npm install --save @angular/material

import the Angular Material NgModule to src/app/app.module.ts
(file content could be slightly different from yours)

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { MaterialModule } from ‘@angular/material’;import { AppComponent } from ‘./app.component’;@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 MaterialModule.forRoot(),
 BrowserModule,
 FormsModule,
 HttpModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Include the theme / style you want to use

create the file src/material.sass and add the following content:

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

change the style to what ever you prefer. The most important color properties are those two statements

$candy-app-primary: md-palette($md-blue-grey, A700, A800, A400);
$candy-app-accent: md-palette($md-cyan, A200, A100, A400);

you can set those two and other colors to your favorid style. You can create your own theme by using this site: Material Color Scheme

Finally make sure that the new file (material.sass) gets loaded properly!
Add the following to the angular-cli.json file located in your projects root directory

“styles”: [
 “styles.css”,
 “material.sass”
 ],

(Optional) Add Material icons and font to your project

edit the index.html and add the following to the <head> part

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

you will be able to use material icons and fonts with this reference.

Test the implementation

add a material2 component to your src/app/app.component.html

<md-toolbar color=”primary”>
 <button md-mini-fab><md-icon class=”app-toolbar-icon”>reorder</md-icon></button>
 <span class=”app-toolbar-filler”><p align=”center”> My first Angular2/Material2 app</p></span>
 <button md-button>About</button>
</md-toolbar>

Save it and start your application by typing the following command to a terminal in your projects root directory

$ ng serve

Open your browser (I recommend Chrome/Firefox) and navigate to http://localhost:4200

You should see a toolbar at the top of your page like this:

That’s it for now! I hope I could help you by creating a new Angular2 app with Material2 as main layout. But don’t forget: Material2 is not ready and in an alpha state! It is maybe better to use something more matured like Bootstrap3.

(last edited: 01/03/2017 17:33)

Cheers

Quick Guide: Install Angular2 and Material2 with angular cli

Written by devblog