最基本的建立 Angular Material 教學

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

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

  1. 安裝 npm package

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

npm isntall --save @angular/animations

npm isntall --save hammerjs

  1. 修改以下內容

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

ng g m shared\material –flat

  1. App.module 加入 materialModule

  1. Style.css 中,加入 theme (否則畫面會很醜):

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

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

import ‘hammerjs’;

  1. 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