Questions tagged [mat-stepper]
79 questions
14
votes
4 answers
Angular Material Stepper component prevent going to all the non visited steps
I'm using the Angular Material Stepper component.
Within my content I have separate buttons that helps the user to move to the next step once the task in the current step is complete.
I want to prevent the user from visiting the next steps by…
Temp O'rary
- 5,366
- 13
- 49
- 109
7
votes
5 answers
Is there a way to lazy load a component within each mat-step?
I am trying to implement a mat-stepper which has different components within each step. I need to pass data from the firs step to the next so I am basically using @ViewChild and @Input to do that. But, I want the component in each step to be…
FZaman
- 73
- 1
- 4
6
votes
1 answer
Disable previous completed steps on mat-stepper in angular 6
I'm working on a project in Angular 6 with Angular material and in one specific route i have a mat stepper with 6 steps configured with isLinear=true, so the user cant go to the next step until complete the actual step and so on.
But when it comes…
Cesar Leonardo Ochoa Contreras
- 446
- 2
- 4
- 17
5
votes
1 answer
Angular Material Vertical Stepper | Extend vertical line in last step
Is it possible to extend the vertical line in the last step?
The template script prevents it:
This is what it is now in the last step:
This is…
user12303948
- 53
- 4
4
votes
1 answer
How to remove default focus on stepper header in angular material?
I have created a simple application in angular using angular material library in which, I have used dialog component. When dialog is opened by user, it will have stepper component of angular material. It has 3 steps. Every steps has angular reactive…
JAYDIP HIRAPARA
- 297
- 4
- 18
4
votes
2 answers
How to show that the last mat-step is complete in mat-stepper?
Okay. I can't believe that I'm posting a question for the first time over something that should be so simple to accomplish, but here we are.
I would like for the final step in my mat-horizontal-stepper to display a checkmark icon and green…
Andrew Medhurst
- 103
- 1
- 2
- 6
4
votes
1 answer
How to load one dynamic component for each step on stepper
The thing with my problem is that I have to load one component of an array dynamically on each step of my stepper on the template.
I followed the Angular guide for loading dynamic components into the template, but for now I am only capable to render…
jespinosa
- 43
- 1
- 4
3
votes
1 answer
How to detect mat-stepper start and end in Angular?
currently, I have a vertical mat-stepper. it fills the steps using a *ngFor.
So, I want to detect the start of this stepper and end of…
wrx95
- 76
- 1
- 6
3
votes
1 answer
how to set full-height to a the mat step content
I have an some horizontal steppers in my app, and I would like to set in one of them the content height to 100%.
I'm not able to do it
cucuru
- 3,456
- 8
- 40
- 74
3
votes
4 answers
Pass the data to next step in component based mat-stepper
I am using a component-based mat stepper component to display a linear process. Each step have own component as below
…
Vijay Vavdiya
- 1,249
- 13
- 17
3
votes
1 answer
Angular Material Stepper prevent Step forward if some condition is true
I am wondering how I can skip a step change in Angular Material Stepper.
Every "solution" I see, are not working. I tried also to set the steps regarding on some conditions to editable=false. But this means, that the step cannot edit if it is…
Buzz
- 315
- 6
- 18
3
votes
1 answer
Dynamically adding step to mat-stepper and navigating to it throws out of bounds error
I am working with a simple mat-stepper where steps are generated from an array using *ngFor.
I'd like to dynamically add a step to the display after the stepper has been rendered and then immediately navigate to it programmatically.
Adding the…
bbop99
- 1,625
- 1
- 11
- 25
3
votes
0 answers
How to get onload event of a material stepper in angular 6
I have a material-vertical-stepper in my application, which is shown inside a bootstrap modal. I have used (selectionChange) directive inside mat-vertical-stepper to track the onchange event. But it is not triggered initially. My stepper data is…
Yadu Chandran
- 177
- 13
2
votes
2 answers
Angular Material custom input validation message not showing with mat-stepper
I implemented custom control based on official guides using ControlValueAccessor:
https://material.angular.io/guide/creating-a-custom-form-field-control
https://blog.angular-university.io/angular-custom-form-controls/
The issue that validation…
Arti
- 7,356
- 12
- 57
- 122
2
votes
1 answer
How can I put label text under icon in Angular Material Stepper?
I couldn't find a way to put label text under stepper icon in Angular Material Stepper. I want to have an Icon with under text but I couldn't find from documentation. I am using the latest version of Angular Material UI. I tried with html and…
Zohidbek Mengliboyev
- 156
- 11