Stack Overflow
Stack Overflow

Questions tagged [angular-material-stepper]

Use this tag for questions about Angular Material Stepper, the implementation of stepped workflow with Material Design styling.

123 questions
18
votes
4 answers

Angular Stepper with selectedIndex set matStepperNext/matStepperPrevious not working

Im using a matStepper and when i set the selectedIndex to 3 i cannot navigate using next and previous. i can click the (1) in the horizontal stepper and then use the next/prev as usual. All the forms are valid and i can navigate using next from 1-7…
Ricardo Saracino
  • 1,345
  • 2
  • 16
  • 37
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
12
votes
3 answers

MatHorizontalStepper stepControl with template driven forms

Is there any way to use [stepControl] error matcher with template driven forms? The docs just teach about an AbstractControl instance, which apparently forces the use of a reactiveForm. I've tried to use [stepControl]="myNgForm" and [linear]="true"…
Alexandre Ducatti
  • 121
  • 1
  • 3
12
votes
7 answers

Angular Material - Prevent mat-stepper from navigating between steps

I have a mat-horizontal-stepper where I set linear property as true. When all the steps are valid as of now I can navigate to previous steps by clicking the header or label. I don't want that property. I need to navigate only through buttons. I…
Sathyamoorthy Ponnusamy
  • 161
  • 1
  • 2
  • 10
10
votes
5 answers

Angular material stepper before-selection-change & prevent step-change for some condition

I am using linear mat-stepper. It works fine with next. I do api call & if it's success then i call stepper-next event instead of using matStepperNext directive. Now when user fills all data on step 1 & directly click on some other step in header…
Ankur Akvaliya
  • 2,989
  • 4
  • 28
  • 53
9
votes
1 answer

Override browser `back` button functionality in Angular?

I have a page in my Angular App where it uses a stepper. When the user is for example on step 3, the first logical thing he will do to get back to the previous step (step 2) is to click on the back button. But obviously, he will get redirected to…
Kasper Juner
  • 832
  • 3
  • 15
  • 34
8
votes
4 answers

Using separate components in a linear mat-horizontal-stepper

In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example: …
Michael
  • 1,036
  • 1
  • 11
  • 22
6
votes
2 answers

Angular material stepper remove numbers

How can I remove the numbers from the Angular material stepper? I do not wish to replace them with an icon, I wish to have an empty circle. Edit : I am using angular 9
Matthieu Raynaud de Fitte
  • 2,001
  • 3
  • 25
  • 49
6
votes
1 answer

How does MatStepper triggers the error state for a step?

I'm implementing a mat-horizontal-stepper in one of my components and I'm trying to get the error state to display on a step if I move from it while the [completed] property is false but this is not happening. I'm not sure if there's some…
IvanS95
  • 5,364
  • 4
  • 24
  • 62
6
votes
1 answer

Angular Material Mat-Stepper: How to use the same formgroup for multiple steps?

This is my form group. I'm using a form group inside another one: this.shopGroup = this.fb.group({ _user: [''], name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])], url_name: [''], desc: ['',…
James
  • 1,189
  • 2
  • 17
  • 32
5
votes
1 answer

How to submit forms in Stepper in Angular 4 material

How to submit form data in the stepper of angular material. I am following the example from angular material https://material.angular.io/components/stepper/examples. I did lot of googling before asking this question, but not found any…
Sivakumar Tadisetti
  • 4,865
  • 7
  • 34
  • 56
4
votes
1 answer

Angular material stepper previous button does not work with linear

I have a material stepper and the mode is set to linear. next button is working just fine but the pevious button is not working. I also tried to work with matStepperPrevious & matStepperNext Link to the stackblitsz I…
Babulaas
  • 761
  • 3
  • 13
  • 47
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
3 answers

Angular Material Stepper 'Paginate'

I have many steps in my stepper, so i want to divide it in two parts, i.e. When users goes inside wizard, the stepper header shows only 1--2--3--4, then, when step 4 is finished, and the user goes into step 5, the header shows 5--6--7--8, and so on…
Alejosaur
  • 58
  • 9
4
votes
3 answers

How to change state icon in Angular Material stepper?

I am using Angular Material stepper. Using STEPPER_GLOBAL_OPTIONS, I am able to change the state of the steps like this: However, how do I access the list of these…
awesomemypro
  • 531
  • 1
  • 11
  • 32
1
2 3
…
8 9