Use this tag for questions about Angular Material Stepper, the implementation of stepped workflow with Material Design styling.
Questions tagged [angular-material-stepper]
123 questions
2
votes
1 answer
Label position of an Angular Material nested Stepper gets overwritten
Looking at a nested Angular Material Stepper, the label position in the child stepper (labelPosition="end") gets overwritten by the label position in the parent stepper (labelPosition="bottom"), as in the following example:

Benji
- 549
- 7
- 22
2
votes
2 answers
Angular Material stepper title disappears when screen is too small
I am using a vertical stepper and it works fine for computer screens. However, when using a screen that is too small to display all of the title at once, it gets replaced with ....
How can I get it to use line breaks rather that hide the title?
The…

Matthieu Raynaud de Fitte
- 2,001
- 3
- 25
- 49
2
votes
2 answers
How to complete a Material Stepper Step, and continue to next step?
I have a an Angular Material Stepper with 3 steps.
The steps are marked as complete=false so that you cannot go to the next step until they are complete.
However, if I mark a step as complete, stepper.next seems to go to an indeterminate…

MDave
- 1,245
- 13
- 29
2
votes
1 answer
Angular Cdk stepper, how to detect when new step added
I have a custom stepper based on Cdk, but it is dynamic. So it is bound to a FormArray. When a item is added to the formArray I need to redirect to the newest step. CdkStepper doesn't seem to trigger any event on item being added to step…

Ingó Vals
- 4,788
- 14
- 65
- 113
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
2
votes
2 answers
How to make separate angular material stepper header and content?
I am doing a vertical stepper with angular material. The thing is that this stepper puts the content of each step below the step header, so if there are many steps it looks awfull because you have to scroll.
My idea is to separate the headers from…

Sergio Fuentes
- 33
- 7
2
votes
1 answer
Angular Material Vertical Stepper single form .reset() not functioning correctly
I've been working on a stepper element for one of my web pages and have tried to implement the .reset() functionality in order to revert the form to a blank state using the material design documentation…

expenguin
- 1,052
- 2
- 21
- 42
2
votes
0 answers
It is possible to make MatVerticalStepper to show the content of completed step (in a different form) with Angular 6
By default MatVerticalStepper is hiding the content of completed step when moves to the next.
Demo: https://material.angular.io/components/stepper/overview
Is it possible, instead of hiding it all together, presenting the content of completed step…

Shurik Agulyansky
- 2,607
- 2
- 34
- 76
2
votes
2 answers
ng4: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
i am using angular material stepper and the functionality is working as expected and getting below error:
Live Demo:

Mohamed Sahir
- 2,482
- 8
- 40
- 71
2
votes
1 answer
How to stop user moving to next step until finish the current step using Angular Material Stepper(Angular 4)
I am using Angular Material to build my steppers and I want user to move step by step which means user has to finish the current step so that can move to the next step, however during searching the Angular Material Docs and CDK Docs I only found one…

Terry Zhang
- 4,541
- 8
- 23
- 29
1
vote
0 answers
Embedding component as Angular-Stepper object does not work
In order to dynamically generate Angular-Stepper Objects with *ngFor, I am using two components. The "History" Component should display a variable amount of "historyUpdate" out of an array of historyUpdate Objects.
But if I put just one static…

Luis Kalckstein
- 19
- 1
1
vote
0 answers
Angular 8 +materials + cordova android blanck screen
When I run my app in mi device android, is not working appear blank page, but if I run in a browser is working.
This is my package.json:
{
"name": "entradas-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
…

Adrian.Aguirre
- 49
- 3
1
vote
2 answers
After setInterval completion execution not exiting the parent function
By taking response of an API and passing it to another function, using the response ID inside a setInterval for checking the status of an operation for implementing progress bar.
For each time sending the ID by API inside the function returns the…

Rattleback
- 9
- 5
1
vote
1 answer
How to show Angular Material Stepper's matStepperNext button as enabled/disabled?
In an Angular 11 project I have an Angular Material Stepper control. My first step contains a form much like this:
1
vote
1 answer
Angular 11 : multiple fields form in stepper
So I'm using angular 11 and struggling to get the following behavior : A stepper, with two inputs in a single steps, that are a datepicker and a select (a dropdown menu). Then I want the stepControl to validate that both fields have been filled, and…

Kevin Heirich
- 109
- 2
- 12