Keywords: Angular | Angular Material | MatStepper | programmatic control | step navigation
Abstract: This article explores methods for programmatically controlling the steps of a <code><mat-horizontal-stepper></code> in Angular Material. By leveraging the <code>selectedIndex</code> property and public methods <code>next()</code> and <code>previous()</code>, developers can move navigation buttons outside the stepper or control steps via code. The guide covers implementation using event binding and <code>ViewChild</code> decorator, with code examples and best practices for enhanced user experience.
Introduction
In Angular application development, Angular Material's <mat-horizontal-stepper> component is commonly used for creating multi-step forms or wizard interfaces. By default, each step includes navigation buttons, but sometimes it is necessary to move these buttons outside the component or control step transitions programmatically. This article delves into methods for achieving programmatic control of stepper steps.
Core Concepts and API
The MatStepper component provides the selectedIndex property for getting or setting the currently selected step index. Additionally, it exposes public methods next() and previous(), allowing programmatic movement forward or backward through steps.
Implementation Method One: Passing Reference via Event Binding
In the template, add a reference identifier to the stepper, such as #stepper, and pass this reference to component methods.
<mat-horizontal-stepper #stepper>
<mat-step>Step 1</mat-step>
<mat-step>Step 2</mat-step>
<mat-step>Step 3</mat-step>
</mat-horizontal-stepper>
<div>
<button (click)="goBack(stepper)" type="button">Back</button>
<button (click)="goForward(stepper)" type="button">Next</button>
</div>In the TypeScript component, define the corresponding methods:
import { MatStepper } from '@angular/material/stepper';
goBack(stepper: MatStepper) {
stepper.previous();
}
goForward(stepper: MatStepper) {
stepper.next();
}Implementation Method Two: Using ViewChild Decorator
Another approach is to use Angular's ViewChild decorator to directly obtain a reference to the stepper component.
@ViewChild('stepper') private myStepper: MatStepper;
goBack() {
this.myStepper.previous();
}
goForward() {
this.myStepper.next();
}In the template, buttons do not need to pass the reference:
<button (click)="goBack()" type="button">Back</button>
<button (click)="goForward()" type="button">Next</button>Advanced Techniques: Enabling and Disabling Buttons
To enhance user experience, navigation buttons can be dynamically enabled or disabled based on the current step. For example, disable the "Back" button when on the first step, and disable the "Next" button when on the last step.
<button (click)="goBack(stepper)" type="button"
[disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button"
[disabled]="stepper.selectedIndex === stepper._steps.length - 1">Next</button>Conclusion
By programmatically controlling the MatStepper, developers can flexibly design stepper interfaces, separating navigation logic from business code, thereby improving application maintainability and user experience. The methods discussed in this article are applicable to Angular 4 and above, based on Angular Material best practices.