Yes. It is possible to jump to a specific stepper by using selectedIndex
property of the MatStepper
. Also, MatStepper
exposes public methods next()
and previous()
. You can use them to move back and forth.
In your template:
Add an id to your stepper e.g. #stepper
. Then in your goBack()
and goForward()
methods, pass the stepper id:
<mat-horizontal-stepper #stepper>
<!-- Steps -->
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack(stepper)" type="button">Back</button>
<button (click)="goForward(stepper)" type="button">Next</button>
</div>
.. and in your typescript:
import { MatStepper } from '@angular/material/stepper';
goBack(stepper: MatStepper){
stepper.previous();
}
goForward(stepper: MatStepper){
stepper.next();
}
Link to stackblitz demo.
You can also use ViewChild
to get a reference to the stepper component in your TypeScript as shown below:
@ViewChild('stepper') private myStepper: MatStepper;
goBack(){
this.myStepper.previous();
}
goForward(){
this.myStepper.next();
}
In this case, you don't have to pass the stepper reference in the method in your component's html. Link to Demo with ViewChild
You can enable/disable the Back
and Next
buttons by using the following:
<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>
I am able to change the color to red with the following style in the styles.css file at the root of the project rather than the stylesheet of the component
.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
background-color: red !important;
color: red !important;
}
to hide the numbers inside each step just use display none in the style of the class ng-star-inserted
.ng-star-inserted {display: none}
Best Answer
There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.
::ng-deep is deprecated and can be removed, also can be used
ViewEncapsulation.None in component decorator to avoid using ::ng-deep
Update with solution to problem
html file example
create theme.scss file and add it to styles in angular.json
note stepper will take color of primary color
theme.scss
Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class. Component that is wrapped in custom class wil use that color, if not color are set from global theme.