Skip to content

Latest commit

 

History

History
63 lines (48 loc) · 1.86 KB

include-angular-material.md

File metadata and controls

63 lines (48 loc) · 1.86 KB

Include Angular Material

Angular Material is a set of Material Design components for Angular apps. This guide will walk you through adding material design to your Angular CLI project and configuring it to use Angular Material.

Create a new project and navigate into the project...

ng new my-app
cd my-app

Install the @angular/material library and add the dependency to package.json...

npm install --save @angular/material

Import the Angular Material NgModule into your app module...

//in src/app/app.module.ts 

import { MaterialModule } from '@angular/material';
// other imports 

@NgModule({
  imports: [
    ...
    MaterialModule.forRoot()
  ],
  ...
})

Now that the project is set up, it must be configured to include the CSS for a theme. Angular Material ships with some prebuilt theming, which is located in node_modules/@angular/material/core/theming/prebuilt.

To add an angular CSS theme and material icons to your app...

/* in src/styles.css */

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

Run ng serve to run your application in development mode, and navigate to http://localhost:4200.

To verify Angular Material has been set up correctly, change src/app/app.component.html to the following...

<h1>
  {{title}}
</h1>

<button md-raised-button>
  Angular Material works! 
  <md-icon>done</md-icon>
</button>

After saving this file, return to the browser to see the Angular Material styled button.

More Info