angular material 使用步驟

tips：默認你已經安裝了必備步驟 如angular npm

 

1、首先在你的電腦上安裝angular

npm install my-app

 

2、angular 安裝成功之后安裝material

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

npm install --save @angular/flex-layout

 

• 在app.module.ts中導入BrowserAnimationsModule

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

• 在style.css中引入material樣式

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

• 在index.html中引入material圖標庫

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

 

3、開始angular項目

• 創建類組件 class

ng g c name

•  創建指令directive

ng generate directive <name>

• 創建管道pipe

ng generate pipe <name>

• 創建服務service

ng generate service <name>

• 創建新的module模塊(可以單獨設置一個material.module.ts來導入material的模塊)

ng generate module material

創建了material.module.ts之后，再在app.module.ts中導入
import { MaterialModule } from "./material/material.module";
 imports: [
    MaterialModule
  ]

• 在material.module.ts中導入所有的material模塊，以減少導入模塊

import {MatToolbarModule} from '@angular/material/toolbar';

@NgModule({
  imports: [
    MatToolbarModule
  ],
  exports:[
    MatToolbarModule
  ]
})

 

4、基礎formgroup表單

• html部分

<form action="" [formGroup]="testForm" #formDirective="ngForm" >
        <mat-form-field  >
            <input matInput placeholder="Input" formControlName="name">
          </mat-form-field>
          <mat-form-field  >
            <textarea matInput placeholder="textarea" formControlName="notes"></textarea>
          </mat-form-field>
    </form>

• component.ts部分

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

export class FormComponent implements OnInit {

  constructor(
    private fb: FormBuilder
  ) { }

  testForm:FormGroup;

  ngOnInit(): void {
    this.testForm=this.fb.group({
      name:[''],
      notes:['']
    })
  }

}

• material.module.ts引入部分

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  declarations: [],
  imports: [
    MatFormFieldModule,
    MatInputModule
  ],
  exports:[
    MatFormFieldModule,
    MatInputModule
  ]
})
export class MaterialModule { }

• app.module.ts引入部分

import { MaterialModule } from "./material/material.module";
import { ReactiveFormsModule } from "@angular/forms";

  imports: [
    MaterialModule,
    ReactiveFormsModule
  ]