Skip to content

material2

Jump to bottom
hantsy edited this page Aug 10, 2017 · 6 revisions

Angular Material2

Material Design is the new desgin language brought by Google, and it becomes more and more popular in these years. There is an official subproject under Angular to implement Material Design specification.

For more details, go to Angular Material 2 project.

Create an Angular project

Firstly create a project via ng command provided by Angular CLI.

ng new ng2-hello-material

@angular/animations is included in Angular 4 release. Some Angular Material components depends on @angular/animations.

npm install --save @angular/animations

Install Angular Material2

Follow the Angular Material Getting Started Guide to install add Angular Material features to the project.

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

At the moment when I wrote this post, this project is still in progress, check the Github page to get the available components.

Import Angular Material NgModule

Open src/app/app.module.ts file, import Angular Material 2 module.

import { MaterialModule } from '@angular/material';
// other imports 
@NgModule({
  imports: [MaterialModule],
  ...
})
export class AppModule { }

Or create a seperated share module to share it for others.

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

@NgModule({
  imports: [
    CommonModule,
    MaterialModule
  ],
  exports: [MaterialModule],
  declarations: []
})
export class SharedModule { }

You can also choose which components will be imported in the certain module.

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyAuthModule { }

Import animation module.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...
 imports: [
	//...
    BrowserAnimationsModule,
...	
export class AppModule {}

Add gesture support

Optionally if you use some gesture based components(md-slide-toggle, md-slider, mdTooltip), you need to install extra dependency: HammerJS.

npm install --save hammerjs

Then import it in src/app/app.module.ts.

import 'hammerjs';

Add a theme

Angular Material comes prepackaged with several pre-built theme css files. These theme files also include all of the styles for core (styles common to all components), so you only have to include a single css file for Angular Material in your app.

You can include a theme file directly into your application from @angular/material/prebuilt-themes.

Available pre-built themes:

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

Choose a pre-built theme, add it in style.scss.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

More details, please read theming guide, and component theming guide.

Add Material Icons

If you want to Material Icon with md-icon(which supports svg icons or font icons), add the following in the index.html.

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

Or import this css resource in your style.css file.

@import '~https://fonts.googleapis.com/icon?family=Material+Icons'

Sample codes

The Angular Material based sample is moved to a new repository under my Github.com.

https://github.com/hantsy/angular2-material-sample

Beside the official Material support, there are some third party projects.

References:

Clone this wiki locally