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
  ]