Angular Material 作為 Angular 的官方元件庫，無論是設計互動還是易用性都有著極高的質量。正如官方所說其目的就是構建基於 Angular 和 TypeScript 的高質量元件庫。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

怎麼安裝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">