Integrating Material for Web

This short tutorial will walk you through getting Angular's Material package set-up within the Angular Native Seed.

• Author: Sean Perkins
• Difficulty: Beginner
• Time: 1 minute, 26 seconds
• Youtube Walkthrough: Video Link

Install @angular/material

Install the material package from npm.

npm install --save @angular/material

Import Material Theming

In our styles.scss file (the web global styling file), we will include the import statement provided from Material's documentation:

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

Import Material Module(s) into Feature Module

For this example we specifically import the MdCheckboxModule. You can import any module, or the global MaterialModule if desired. Remember to only include this module in the regular module.ts file. DO NOT include the import in the .common.ts or the .module.tns.ts file.

import {MdCheckboxModule} from '@angular/material';
...

imports:  [
   MdCheckboxModule
]

Leverage Material Components

For this example we simply included the checkbox on the about component. Once again, only include this into the component.html file. DO NOT include the component in the {N} template file.

<md-checkbox>Checkbox</md-checkbox>