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
4
votes
1 answer

Angular CDK Stepper Footer template through ngTemplateOutlet

I am trying to create a generic stepper component using Angular CDK Stepper as mention here https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper. I want to pass stepper's header and footer template through template…
sam_dev
  • 151
  • 2
  • 9
4
votes
1 answer

Angular Material Stepper steps cannot be hidden with [hidden]

I have an Angular Material Stepper component with a fixed amount of steps. I want to be able to hide steps depending on whether a condition is true or false. I first tried this by using the *ngif directive, and it worked just fine until I realized…
CAlex
  • 1,140
  • 2
  • 14
  • 28
4
votes
2 answers

multiple mat-error for formArray unable to figureout

I want to have multiple error messages and unable to figure out how to do so..? Here I need to validate each step separately so that's why I am using this stepper
Mubeen
  • 351
  • 1
  • 2
  • 15
4
votes
3 answers

Detect when mat-stepper validation fails

We have a linear mat-horizontal-stepper now we want to show a MatSnackBar when the user tries to proceed an forgot a required field. CdkStepper seems to call _anyControlsInvalidOrPending silently and returns if any input is not valid. Does anybody…
wutzebaer
  • 14,365
  • 19
  • 99
  • 170
4
votes
2 answers

CSS for completed mat-step in mat-vertical-stepper

In mat-vertical-stepper I have 4 mat-step. How can I have tick-mark once 1st step is completed? I tried:
Nandini S
  • 209
  • 2
  • 4
  • 10
4
votes
1 answer

Angular material: Programmatic "next" for linear stepper

I want to use the angular material stepper but I need to do some asynchronous service call before proceeding to a second step. How can I achieve this? I could add a click handler to the next button but that will not wait for the async call to come…
hansi
  • 2,278
  • 6
  • 34
  • 42
3
votes
3 answers

Angular Material Stepper with Separate Component for each step - ExpressionChangedAfterItHasBeenCheckedError

I have a material stepper with forms in each step of the stepper. There, each step should be controlled by the form associated with it. Even though this question has already been asked in SO, the answers to those questions do not resolve my issue.…
vigamage
  • 1,975
  • 7
  • 48
  • 74
3
votes
1 answer

Angular 9 - Remove default icon (create) on Angular Material Stepper

I'm facing this annoying problem with Angular: I overrode stepper icons by adding in to the provides of the page: provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false, showError: true} This is the HTML page (just a piece,…
Bugpirasi
  • 371
  • 6
  • 22
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
1 answer

Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS

I'm unable to set the icon colors I have a mat-horizontal-stepper with five mat-steps (e.g. named Part A, Part B ... Part E). Each part (mat-step) may have different colors depending some business rules. I know how to change the "selected" mat-step…
Alex
  • 285
  • 4
  • 11
3
votes
2 answers

Angular Material Stepper is undefined on first load

I'm using Angular Material Stepper in a component. The problem is that when the component loads for the first time it breaks with the error message ERROR TypeError: Cannot read property 'selectedIndex' of undefined My…
tayyab_fareed
  • 559
  • 9
  • 15
3
votes
1 answer

How to set material stepper to open second item by default and set the icon color?(Angular Material)

I use a vertical material stepper and I want to open by default the second item. Now it opens the first item. I would like to open "fill out your address" by default. For this I used Material Angular. So when I open the application I would like to…
ryy77
  • 1,134
  • 5
  • 20
  • 36
3
votes
1 answer

cdkStepLabel - ng-template - innerHTML

I am creating custom stepper using CDKStepper in angular 7, I am using Fill out your name 1

This is any content of "Step 1"

 and in stepper template - for…
Vinay Sheoran
  • 528
  • 3
  • 15
3
votes
1 answer

Angular 6 Material Stepper mat-step nested reactive forms

Hello I have issue with dynamic stepper where I try to generate steps with form for each step. Forms comes from nested FormGroup object. Scenario goes along: Form: this.formGroupNested = _formBuilder.group({ formGroup1: _formBuilder.group({ …
Uland Nimblehoof
  • 862
  • 17
  • 38
3
votes
3 answers

mat-stepper reset forward step when clicked on previous - Angular 6

Angular 6 app stepper.component.html, check_circle
Ahelp
  • 183
  • 4
  • 13
1
2
3
…
8 9