Questions tagged [mat-stepper]

79 questions
0
votes
1 answer

mat-vertical-stepper set page to the start of the stepper when next is clicked

I have a very long form, and I am trying to make it more usable for the user. I found this code as a reduced example of the code I work on https://stackblitz.com/edit/angular-yz6dqk-c9zouk?file=app%2Fstepper-overview-example.html. What i want to…
Blackhole
  • 426
  • 3
  • 14
0
votes
0 answers

Problem implementing services and activedroute in my project

I am using a template called mat-stepper in my project and it has services, router and activedroute the problem is that when I put these in the constructor the template is no longer shown, I have been investigating and I see that I should not put…
0
votes
1 answer

How to make CSS change in Angular Material Stepper?

I was working with Mat-Stepper on a project. This is the stackblitz link of the project. I wanted to make two changes here:- How can I remove the horizontal line between the steps and replace it with something else, like an arrow or something? I…
0
votes
0 answers

Angular 12 mat-stepper: mat-step-icon-state-number changes its color by condition

I have a question regarding the step icon color of Angular Material Stepper. This module provides an attribute, linear, to allow user to finish all steps in sequential order (step1,2,3...) or randomly (step1,4,3,2..). As for my project, I have a…
0
votes
1 answer

Material Stepper setting selected index to dynamically added step

I use angular material stepper. I am trying to keep the current step while changing between horizontal stepper and vertical stepper. I'm using selectedIndex but it's not working. Link to stackblitz demo. Help is appreciated this.myStepper.linear =…
alabanu
  • 31
  • 5
0
votes
0 answers

How to initialise a stepper in Angular?

I have written this code in my typescript file. @ViewChild('stepper') stepper: MatStepper; And it also has this, /** Dialog for uploading avails. */ @Component({ selector: 'upload-avails-dialog', templateUrl:…
Anjali Raj
  • 17
  • 4
0
votes
1 answer

Angular Material Mat Stepper: Is it possible to have multiple steps being active/shown?

Is it possible to have multiple steps opened/being displayed on Angular Mat Stepper? I can only show one, and I've been trying to look for an answer, but I didn't see anything about it.
user16687043
0
votes
1 answer

How to disable cursor when hovering over angular component?

I currently have a horizontal mat-stepper component which can be found below; The user is currently able to go back to the previous step by clicking the "Back" button OR by clicking the header of each step. I would like to disable the ability to…
0
votes
3 answers

selected object not updating in object array (between components) for angular

i have a parent component (name steps, i use material-step) and this parent component's have 2 child component. This child components using same model: i push data in the listing model with many functions. Later, i want to update the selected index…
0
votes
1 answer

How to skip step in material stepper

I am having a material dialog, in that dialog I've a stepper.. I've 4 steps.. where each step consists a form.. When I submit first step, I'm saving the form and moving to next step.. Here if I close my dialog and again if I try to open it again.. I…
sun
  • 1,832
  • 4
  • 19
  • 31
0
votes
1 answer

How to show a series of steps in angular

After searching for a lot of time I didnt find any good solution for my issue. For our application I have to show the progress of the order at the top of the screen. Something like below But in our workflow we have a number of steps, 15 to be…
Zapp
  • 19
  • 1
  • 4
0
votes
1 answer

How to navigate through the mat-vertical-stepper in same component

i am building a website, In registration form i am using mat-vertical stepper it has 5 mat-steps 1)personal Info 2)Investment profile 3)account Info 4)setup Funding 5)sign in and submit In sign in and submit all the information from the previous…
sunaina
  • 1
  • 2
0
votes
0 answers

Why does my Mat-stepper doesn't show immediately when the page is loaded?

I am encountering a very weird issue . I am developing a website with angular 13.0.2 and I am creating a form using mat-stepper (and ngx-editor , I mention it in case it's the problem).When the page loads everything shows perfectly except for the…
Antsa R
  • 15
  • 3
0
votes
1 answer

mat stepper step completed & valid but not done

I am using mat-stepper with formGroup on each step. I fill form on then step and then click to the next and even if form is valid previous doesn`t become done (it satays edit and with mat-step-icon-selected) As i understood it is default behavior:…
Alexandra
  • 37
  • 7
0
votes
1 answer

Angular material stepper styling

Hi I want to customize the existing angular material steper ui like the given image. Is it possible to change the icon programatically,If there is an error then it should show an error icon with red…
Ajith
  • 775
  • 1
  • 13
  • 47