Questions tagged [mat-stepper]
79 questions
2
votes
1 answer
Mat Stepper as view child unit test
How to unit test Material stepper in this situation:
export class FooComponent implements OnInit {
@ViewChild('stepper') stepper: MatStepper;
}
bar() {
this.stepper.selectedIndex = 1;
}
}
This will work, but when testing…
NenadP
- 585
- 7
- 24
2
votes
1 answer
How to destroy components in mat-stepper
I have some problems with my mat-stepper, where each step is a new component.
My problem is that ngOnDestroy() is not being triggered on each steps (components), when going back and forth in my mat-stepper.
My stepper is as…
Thomas Leo Blok
- 88
- 11
2
votes
1 answer
MatStepperModule in Ionic 5 Cannot GET
I am new to programming and my question might be very easy for you to answer.
I am using Visual Studio Code, Ionic 5, Angular 9
Now I want to add a Vertical Stepper to my project.
So I first did npm install @angular/material
and then added…
Eva Helmerich
- 51
- 5
2
votes
0 answers
how to combine multiple formgroup and post to one api using mat stepper in angular 6
Im using mat-stepper of Angular Material design library.
I use 4 separate FormGroups. I would send informations of first 3 formGroup to combine and 4 is separate. in 3rd stage on clicking the submit button 3 formGroups to be combined and send to a…
NrJ
- 105
- 2
- 10
2
votes
0 answers
Collapse all steps in Angular Material vertical Stepper
I want to implement a vertical stepper in my application, but can't find any way to start with an "all collapsed" state. The goal is that the user can see the whole collapsed step list on the screen before clicking a step and starting to fill or…
cosmicdust
- 61
- 7
2
votes
3 answers
How to move stepper from one step to second step using angular and angular material
I have 2 - 4 step form. I had separate out the form like below structure.
First there is auth folder under then there register folder. Under this register - register.ts and register.html. Under register.html I had implemented mat stepper like…
Mohammed Sabir
- 354
- 1
- 4
- 16
1
vote
0 answers
Is it posible to make a mat-step unclickable without affecting matTooltip
End
Melvin S Alex
- 11
- 3
1
vote
0 answers
reverse mat-stepper step numbering
I want to reverse the numbering of the mat-stepper steps.
Currently each mat-step contains a mat-step-icon, which contains a mat-step-icon-content, which contains a span element of class ng-star-inserted, within which there is this step's index,…
Nimrod Fiat
- 473
- 3
- 12
1
vote
1 answer
Angular matStepperNext calls unwanted submit method
Im using stepper on Angular 11
I want to use 3+ steppers to fill UserData form and evry time i press the next button it tries to submit , causing errors and triggering an allert beacouse the form is not completelly filled yet
I made a button save to…
asdrubalo
- 49
- 1
- 6
1
vote
1 answer
How to configure mat-stepper to only allow going to the last step if FormGroup of all previous steps are valid?
I am using a mat-stepper for a dialog that is used both for creating new and for editing existing entities of a specific type. The stepper consists of four steps. Each of the first three steps contain a form for entering data while the last step is…
Chris
- 1,417
- 4
- 21
- 53
1
vote
1 answer
Testing Material components as a child component
I have some component TestComponent that, in it's template, uses a . Because of the context of the stepper, I have to programmatically advance to the next step rather than using the matStepperNext directive on a button. So my component…
PaulBunion
- 346
- 2
- 18
1
vote
1 answer
Angular material stepper not showing
I'm using angular material and all component working as well, but stepper is not working
this is he Html File
The mat-slider is working but the mat-horizontal-stepper not working
please take a look at the images
ahmed essam
- 451
- 1
- 4
- 7
1
vote
1 answer
How to do component test for mat stepper?
I have the below mat-stepper steps:
avdeveloper
- 449
- 6
- 30
1
vote
0 answers
I want to build Mat stepper something like this in angular
This is the css used for selected state
I need to build the stepper similar to this picture don't know where to start and what to used
.mat-step-icon-selected {
background-color: #2699FB !important;
color: white !important;
…
Noob being Geek
- 21
- 3
1
vote
1 answer
How to disable a horizontal-stepper with condition (Angular mat-step)
I have three mat-step. I need to disable 2nd mat-step with some condition and need to allow me to go to 3rd step without that condition. For example, If I have a form in first-stepper, if that form is valid only, I can go to second stepper, but I…
Kasthuri
- 11
- 5