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图标库

3、开始angular项目

• 创建类组件 class

ng g c name

•  创建指令directive

ng generate directive 

• 创建管道pipe

ng generate pipe 

• 创建服务service

ng generate service 

• 创建新的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部分

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