angularmaterial.css,Angular 项目引入Angular material UI

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

配置动画

在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 { }

插入组件模块引用

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

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

@NgModule({

...

imports: [MatButtonModule, MatCheckboxModule],

exports: [MatButtonModule, MatCheckboxModule],

...

})

export class AppModule{ }

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

引入一个material UI 的css样式

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

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

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

手势等组件依赖

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

npm:

npm install --save hammerjs

Yarn:

yarn add hammerjs

安装icon组件(如果需要)

在index.html 里添加声明：

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

在组件页面文件中使用需要用到的组件

注意：安装的时候注意angular material的版本要同angular cli的版本兼容。

angular cli的版本可以通过：

ng-v 查看。