Stack Overflow
Stack Overflow

Questions tagged [mat-stepper]

79 questions
1
vote
2 answers

How to show default icons instead 'done' icon in angular mat-stepper

I am using angular 8.2.4 and horizontal mat-stepper. I have customized the icons in each step and I do not need to show the 'tick' icon (which corresponds to the done state) once each and every step is visited. This is how it looks like…
SMash
  • 345
  • 2
  • 7
  • 23
1
vote
3 answers

Material Stepper | Header Navigation causing method to execute twice

I'm using a stepper with dynamic forms in each step. I have created methods for back and next button which I call on click of next and back button like this: …
Sunil Ojha
  • 223
  • 1
  • 7
  • 20
1
vote
1 answer

Use advanced custom validation across multiple mat-steps

My rather complex Stackblitz Normally when I have complex validation in reactive forms I would define a formGroup for those controls that depend on each other. This is not possible in the above senario, where we have 3 steps = 3 groups and the…
Andre Elrico
  • 10,956
  • 6
  • 50
  • 69
1
vote
3 answers

How to keep mat-horizontal-stepper to center of page

I am using Angular 6 mat-horizontal-stepper. I want to give some specific width to it and want to keep it in center of page. For mat-horizontal-content-container i am able to keep it in center .mat-horizontal-content-container text-align:…
ananya
  • 1,001
  • 6
  • 33
  • 50
1
vote
1 answer

Disable 'Ripple' effect of Angular Meterial Stepper component (when clicking on Tab)

I have an app that uses Angular Material Stepper component. How can I disable 'ripple' behavior on click by step tabs without CSS-hacks? Thanks!
Pavlo Kit
  • 23
  • 3
1
vote
1 answer

Child Component to wait for Parent Component ngOnInit async operation before initializing

I'm using mat-stepper for implementing customer onboarding process. All 5 individual child mat-stepper component are inside one parent component.
candidJ
  • 4,289
  • 1
  • 22
  • 32
0
votes
0 answers

stepper how to prevent selectionChange on programatically next

I have a mat-stepper, and I want to manage the event when a step is manually is clicked by the user, or with a button in the view.
cucuru
  • 3,456
  • 8
  • 40
  • 74
0
votes
1 answer

How to test mat-stepper with Cypress

I want to test mat-stepper with Cypress. In particular I want to verify that a particular step is currently selected or not. I have tried to put a data-cy attribute on the mat-step tag, but this is not rendered on HTML, so I can not access directly…
Simone Brognoli
  • 1
  • 2
0
votes
0 answers

Attach id to mat-step

Im looking for the best way to attach an id to a mat step, such that I can identify the current Step from a service. E.g content1
pyrogen
  • 209
  • 1
  • 7
0
votes
1 answer

Angular Material apply classes on mat-horizontal-stepper

Running Angular 11 I have two separate components, each of which contains a material horizontal stepper. I want to use a class to control the color of the selected and unselected stepper options. I can set styles that apply to all steppers, but…
A. Patterson
  • 41
  • 2
  • 6
0
votes
0 answers

Focusing Angular Material Chip programatically within Material Stepper Child Component

My Problem: I do have a Angular Material mat-chip-listbox component with mat-chip-option childs within Angular Material Stepper. When this step is openened i want the first child to get focus(). ` …
Pim redrum
  • 1
  • 1
0
votes
0 answers

Angular Material Stepper with Autocomplete more options to step

I have a question, is it possible that if I select an item in autocomplete via ngModel in step1, a different window will open every time I select it - different content in step 2. (for example, I load a different component, but let it be displayed…
Din14
  • 41
  • 4
0
votes
1 answer

Mat-stepper next button inside table needs double click Angular

I am trying to make the rows of a table to be next steppers for a mat-stepper. The problem is that the buttons need to be double-clicked in order to be selected. I am including my code below
jason
  • 55
  • 1
  • 5
0
votes
0 answers

How can i show Angular mat stepper horizontal even in a mobile view?

Anular mat stepper is showing vertical in mobile view. I don't want to show Angular mat stepper vertical view. Pelase help. Here is my code -
Amirkhan
  • 36
  • 4
0
votes
1 answer

How to control mat-stepper navigation between steps without Linear mode?

Is it possible to validate a step before going to the next one and the linear mode is not enabled ? When i disabled the linear mode of the stepper and set its property to false, i don't have the control to validate navigation between steps.
chedi dridi
  • 3
  • 1
1 2
3
4 5 6