Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2+ Material stepper : Is it possible to open all steps in material stepper

Is it possible to open all steps in the angular material stepper component?

like image 652
lee Avatar asked Jul 25 '18 14:07

lee


People also ask

How many stepper types do we have?

There are two types of steppers—input steppers and progress steppers.

What is stepControl in Mat stepper?

For each mat-step , the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step. There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step.

What is matstepper?

The <mat-stepper>, an Angular Directive, is used to create a wizard like work-flow steps.


1 Answers

For vertical stepper, just add the following in your component's css file:

::ng-deep .mat-vertical-stepper-content { 
  visibility: visible !important; 
  height: 100% !important; 
}

Please note that ng-deep is deprecated starting from Angular 8 and it might be removed in future versions.

like image 152
Georgiana Sch Avatar answered Sep 21 '22 09:09

Georgiana Sch