Angular 项目引入Angular material UI

1. Install Angular Material, Angular CDK and Angular Animations

npm:

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

Yarn:

yarn add @angular/material @angular/cdk @angular/animations

2. 配置动画
   在app.module.ts 文件中引入需要用到的动画module。

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

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

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

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class AppModule { }

3. 插入组件模块引用
   在app.module.ts 文件中引入需要用到的组件。

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class AppModule{ }

exports后，可以在工程的任意需要地方使用引入的组件。

4. 引入一个material UI 的css样式
   在全局css文件style.css 文件中引入material的默认UI样式

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

也可以不引用，使用自定义的css样式

5. 手势等组件依赖
   某些组件需要用到第三方js依赖，比如(mat-slide-toggle, mat-slider, matTooltip)需要用到HammerJS，需要自己将依赖安装到应用程序文件里

npm:

npm install --save hammerjs

Yarn:

yarn add hammerjs

6. 安装icon组件（如果需要）
   在index.html 里添加声明：

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

icon组件还可以使用自定义的svg格式的icon。

7. 在组件页面文件中使用需要用到的组件
   <button mat-button />

注意：安装的时候注意angular material的版本要同angular cli的版本兼容。
angular cli的版本可以通过：
ng-v 查看。