以下是一个示例代码,演示如何在Angular Material步进器中添加一个标题和下一步按钮:
npm install @angular/material
import { MatStepperModule } from '@angular/material/stepper';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatStepperModule,
MatButtonModule
],
...
})
export class AppModule { }
Step 1: Personal Details
Step 2: Address Details
Step 3: Confirmation
import { Component, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
@Component({
...
})
export class YourComponent {
@ViewChild(MatStepper) stepper: MatStepper;
// Method to move to the next step
nextStep() {
this.stepper.next();
}
}
nextStep()
方法。在组件的HTML文件中添加以下代码:
现在,当用户点击下一步按钮时,步进器将自动移动到下一个步骤。同时,每个步骤的标题也会显示在步进器的顶部。