前端UI component我選擇用Angular Material
首先要先安裝Angular Material
npm install --save @angular/material @angular/cdk @angular/animations
再來在app.moudle裡面import Angular Material的動畫
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
material中有一個可使用icon的功能需要再index.html link進來
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
因為Angular Material要用哪個UI物件就要在app.module裡面import
EX:你想用Button就要import MatButtonModule,想用checkbox就要import MatCheckboxModule
所以我們利用Angular的特色來客製一個Angular material module,這點官網也有說到
ng g moudle angular-material
以下我舉例import了Buttton、Checkbox、Input、Icon、SnackBar
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//import Angular Material的動畫移到這邊即可
import { MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatSnackBarModule } from '@angular/material';
@NgModule({
imports: [
BrowserAnimationsModule,
MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatSnackBarModule
],
exports: [
BrowserAnimationsModule,
MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatSnackBarModule
],
declarations: []
})
export class AngularMaterialModule { }
最後要再style.scss裡面import進material的風格CSS
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
設定好後即可以開始撰寫前端畫面程式了
<mat-checkbox>Check me!</mat-checkbox>
<mat-form-field>
<input matInput placeholder="Favorite food" value="Vegetable">
</mat-form-field>
<button mat-fab color="warn" (click)="openSnackbar()">
<span matTooltip="Add">
<mat-icon>add</mat-icon>
</span>
</button>