Material 套件

npm install --save @angular/material @angular/cdk
加入 theme 設定, 套件內建四種樣式, 位於 @angular/material/prebuilt-themes/, 把其中一個樣式加入到 styles.css 內

@import "~@angular/material/prebuilt-themespurple-green.css";
 

1.需有 @angular/animations 套件(主要套用 WebAnimation API 非所有瀏覽器均支援)
.套入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  imports: [ BrowserAnimationsModule ],
})

若要取消特效則改為 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
若要強化瀏覽器支援度, 則可安裝 npm install --save web-animations-js 套件, 安裝後開啟 src/pollyills.ts, 找到import 'web-animations-js',取消註解, 若找不到也可直接加入

配合安裝 npm install --save hammerjs 可讓行動裝置支援手勢操作, 安裝後在 src/main.ts中加入 import 'hammerjs';