angular Material 作为 Angular 的官方组件库，无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。

怎么安装angular material？

1、前期准备：npm(安装node即可)，angular cli脚手架

2、自建项目

ng new my-app           //my-app项目名字
ng g c project                //组件名project

3、安装angular material和angular cdk

//npm方法
npm install --save @angular/material @angular/cdk

//yarn方法
yarn add @angular/material @angular/cdk

4、常用项animations（非必备）

//npm方法
npm install --save @angular/animations

//yarn方法
yarn add @angular/animations

5、引入组件模块

6、引入主题

//根目录的styles.css
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
//或者直接在index.html里使用<link>标签
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

7、手势支持

有的标签（mat-slide-toggle,mat-slider,mattooltip等）需要hammerJS来支持，为了获取这些组件的所有特性，通过npm引入到项目中。

//npm
npm install --save hammerjs
//yarn
yarn add hammerjs

然后在入口文件（main.js）中引入

import 'hammerjs';

8、添加material的icon（可选）

如果想要你的mat-icon标签获取官方的Material Design Icons，在index.html文件中加入下面的link。

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

该安装的都已经安装好了，可以放心大胆地使用了，详见官网（https://material.angular.io/）哦。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/9444