Skip to content
This repository was archived by the owner on May 28, 2024. It is now read-only.

AngularMaterial-2.md

Latest commit

 

History

History
71 lines (45 loc) · 1.86 KB

AngularMaterial-2.md

File metadata and controls

71 lines (45 loc) · 1.86 KB

Angular Material 2 Setup

Angular Material 2 has an official Getting Started guide. Hence this guide focuses on integrating Angular Material 2 in the app architecture generated by Angular CLI.

Install Dependencies

yarn add @angular/material

yarn add @angular/animations

yarn add hammerjs

Include Modules

Open src/app/app.module.ts and add specific Angular Material modules and hammerjs. Here were are including just the MD Button.

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

@NgModule({
  ...
  imports: [
    MdButtonModule,
    BrowserAnimationsModule
  ],
  ...
})

Include Pre-Built Theme

Open src/style.[scss/less/css] and add the following import statement at the top.

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

Open src/index.html and add mat-app-background class to the body tag.

<body class="mat-app-background">

Create Custom Theme

If you are ready to get started with your custom theme, follow the official Theming your Angular Material app

(Optional) Add Material Icons

Include the following link tag in src/index.html

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

Start using Angular Material components

Head over to Angular Material to see all the supported components.

For example, try adding the following button element inside one of your components.

<button md-raised-button color="primary">This is it!</button>

It should render like the following!

Angular Material