First, install
1. preparation: npm (node can be installed), angular cli scaffolding
2. self-built project
May-new new App ng // My-App project name
gc project ng // name of the component project
3. Install angular material and angular cdk
// npm method
npm install --save @angular/material @angular/cdk
// yarn method
yarn add @angular/material @angular/cdk
4. Common items Animations (non-mandatory)
// npm method
npm install --save @angular/animations
// yarn method
yarn add @angular/animations
The module assembly is introduced
6. The introduction theme
styles.css // root directory
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
// or use the <link> tag directly in index.html
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
7. gesture support
Some label (mat-slide-toggle, mat -slider, mattooltip , etc.) need hammerJS to support, in order to obtain all the features of these components, by npm introduced to the project.
// asl
npm install --save hammerjs
//yarn
yarn add hammerjs
File is then introduced into the inlet (main.js) in
import 'hammerjs';
8. Add icon material (optional)
If you want your mat-icon labels get official Material Design Icons, add the following link in the index.html file.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Second, the use
The installation have been installed, you can safely use, see the official website oh.
Reference document: angular5 + of how to build your web pages with the UI library component material .