Angular Material

前端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進來

index.html

<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

Angular-material.module.ts

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";

設定好後即可以開始撰寫前端畫面程式了

tri001.component.html

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