angular-material2Getting started with angular-material2


Remarks

This section provides an overview of what angular-material2 is, and why a developer might want to use it.

It should also mention any large subjects within angular-material2, and link out to the related topics. Since the Documentation for angular-material2 is new, you may need to create initial versions of those related topics.

Versions

VersionChangelogDate
2.0.0-beta.8Link2017-07-06
2.0.0-beta.7Link2017-06-19
2.0.0-beta.6Link2017-05-25
2.0.0-beta.5Link2017-05-13
2.0.0-beta.4Link2017-05-12
2.0.0-beta.3Link2017-04-07
2.0.0-beta.2Link2017-02-15
2.0.0-beta.1Link2016-12-23
2.0.0-beta.0Link2016-12-22

Installation and Setup from master with Angular CLI

This example will be how to install from master and will be using @angular/cli as well.

  1. Make a new project with @angular/cli :

    ng new my-master-app
     

    If you haven't installed @angular/cli , use this command:

    npm install -g @angular/cli
     
  2. Install from master :

    npm install --save @angular/animations
    npm install --save angular/material2-builds
    npm install --save angular/cdk-builds
     
  3. Follow the same guide as above.

Done!

Installation or Setup with Angular CLI

In this example, we will be using @angular/cli (latest) and the latest version of @angular/material . You should at least know the basics of Angular 2/4 before continuing the steps below.

  1. Install angular material module from npm :

    npm install @angular/material --save
     
2.0.0-beta.3

This only applies to versions 2.0.0-beta.3 and up.

Install the @angular/animations module:

npm install @angular/animations --save
 
2.0.0-beta.8

This only applies to versions 2.0.0-beta.8 and up.

Install the @angular/cdk module:

npm install @angular/cdk --save
 
  1. In your application module import the components which you are going to use:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
    
    import { AppComponent } from './app.component';
    
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
         imports: [
             BrowserAnimationsModule,
             MdButtonModule,
             MdSnackBarModule,
             MdSidenavModule,
             CommonModule,
             // This is optional unless you want to have routing in your app
             // RouterModule.forRoot([
             //     { path: '', component: HomeView, pathMatch: 'full'}
             // ])
         ],
         declarations: [ AppComponent ],
         boostrap: [ AppComponent ]
    })
    export class AppModule {}
     

You are now ready to use Angular Material in your components!

Note: The docs for specific components will be coming soon.

Set up theme, gesture support and material icons


Theme:

A theme is required for material components to work properly within the application.

Angular Material 2 provides four prebuilt themes:

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

If you are using Angular CLI, you can import one of the prebuilt themes in style.css .

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

Theme can be added using <link> in index.html as well.

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
 

HammerJS

Add HammerJS to the application via CDN or npm :

npm install --save hammerjs
 

In your root module, usually app.module.ts , add the import statement:

import 'hammerjs';
 

Material Icons:

Unless, custom icons provided, Angular Material 2 <md-icon> expects Material Icons.

In index.html add:

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

Wrapping all modules together

You can also easily wrap all angular modules, which you are going to use, into one module:

import { NgModule } from '@angular/core';
import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
 
@NgModule({
    imports: [
        BrowserAnimationsModule,
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ],
    exports: [
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ]
})
export class MaterialWrapperModule {}
 

After that simply import your module into the application main module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { MaterialWrapperModule } from './material-wrapper.module.ts';
import { AppComponent } from './app.component';


@NgModule({
    imports: [
        BrowserAnimationsModule, 
        MaterialWrapperModule,
        CommonModule,
        // This is optional, use it when you would like routing in your app
        // RouterModule.forRoot([
        //     { path: '', component: HomeView, pathMatch: 'full'}
        // ])
    ],
    declarations: [ AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule {}