CODEWITHSUNDEEP
angularangular-material
sampl
sampl

Reputation: 21

Angular material matstepper to unselect all the steps

In Mat-stepper at initial rendering i don't want first step to be selected. I want all the steps to be unselected (unfilled) steps.

Upvotes: 2

Views: 2226

Answers (3)

reza mohammadkhan
reza mohammadkhan

Reputation: 11

 ngAfterViewInit() {
    this.stepper.['_updateSelectedItemIndex'](-1);
  }

the correct code that works for me is :

this.stepper['_updateSelectedItemIndex'](-1);

this.stepper'_updateSelectedItemIndex';

Upvotes: 1

ArunKarthick
ArunKarthick

Reputation: 26

Late response but This works in Angular Material 12.0 version.

@ViewChild('stepper') stepper: MatStepper;

 ngAfterViewInit() {
    this.stepper.['_updateSelectedItemIndex'](-1);
  }

Inspired by answer from @ppavlov

Upvotes: 1

ppavlov
ppavlov

Reputation: 488

I checked the angular documentation and couldn't find anything related how to achieve this. The only thing that popped up into my mind is that you can modify to select/unselect steps is the index of the current step. The solution that I propose is to set the selected index property of the MatStepper ViewChild to -1.

  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectedIndex = -1;
  }

It works because in the implementation of the mat-stepper, all of the steps are foreached and based on the selcectedIndex matching the index of the steps array and as we know it starts from 0:

"selectedIndex === i"

Reference

Example: https://stackblitz.com/edit/angular-mat-stepper-program-n7beys

Update: The top approach doesn't quite make it. When you click on a step it throws an error because you are accessing the step array with index of -1. Browsing thought the source code I can offer another approach of extending either mat vertical or horizontal stepper and providing different functionality for when you step and provide -1.

You can also create your own custom implementation and base it on cdkStepper -> https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper

And if you dont manage to do that you can check the stepper from teradata. I know that they provide an extended api. https://teradata.github.io/covalent/#/components/steps/overview

Upvotes: 2

Related Questions