月份：九月 2018

這篇是抄襲官方的 angular Get Start 教學，但簡化步驟，直接切入重點：

換個方式直接說明需要執行的步驟：

1. 安裝 npm package

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

npm isntall --save @angular/animations

npm isntall --save hammerjs

2. 修改以下內容

將所有的 angular material module 放入此處：請注意：很多…：

ng g m shared\material –flat

3. App.module 加入 materialModule

4. Style.css 中，加入 theme （否則畫面會很醜）：

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

5. 將 hammerjs 放入到 main.ts (entry point 不需要每個地方重新呼叫）

import ‘hammerjs’;

6. 在 index.html 中加入 Material Icon stylesheet

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

附上所有 angualr module 列表：

CdkTableModule,

MatAutocompleteModule,

MatButtonModule,

MatButtonToggleModule,

MatCardModule,

MatCheckboxModule,

MatChipsModule,

MatStepperModule,

MatDatepickerModule,

MatDialogModule,

MatDividerModule,

MatExpansionModule,

MatGridListModule,

MatIconModule,

MatInputModule,

MatListModule,

MatMenuModule,

MatNativeDateModule,

MatPaginatorModule,

MatProgressBarModule,

MatProgressSpinnerModule,

MatRadioModule,

MatRippleModule,

MatSelectModule,

MatSidenavModule,

MatSliderModule,

MatSlideToggleModule,

MatSnackBarModule,

MatSortModule,

MatTableModule,

MatTabsModule,

MatToolbarModule,

MatTooltipModule