Questions tagged [mat-stepper]

79 questions
0
votes
2 answers

How to disable the remaining steps in Angular mat stepper

I am creating an angular application which has mat stepper with 4 steps. User has to complete the steps one by one. Only if he completes the form in first step he can go to next step by clicking on the button in the form not by clicking on stepper…
ani
  • 446
  • 1
  • 9
  • 31
0
votes
0 answers

How to prevent mat-stepper's steps to change state on key press?

I have implemented a linear mat-stepper in my application. It consists of some forms on each step to which you can navigate using next and previous buttons. You can go to next step by clicking on next button only when the current form's data is…
Yogesh
  • 366
  • 2
  • 16
0
votes
1 answer

How to find previous selected index of angular mat stepper

When user navigates from step 4 to step 2 in angular mat stepper I need to disable few buttons in step 2. I am trying to perform something like if selectedIndex = 1 and previous selected index is 3 disable buttons. But is there any way to check the…
ani
  • 446
  • 1
  • 9
  • 31
0
votes
3 answers

How to remove ripple effect from mat-stepper

tihs is the effect when you hover you mose over matstepper not able to figure how to disable this effect want to remove ripple effect or focus effect or scrollable affect from mat-stepper please help me out here i have tried all the methods not…
0
votes
1 answer

mat-stepper not working properly with viewEncapsulation.None

I have the following component setup devis.component.ts @Component({ selector: 'app-devis', templateUrl: './devis.component.html', styleUrls: ['./devis.component.scss'] }) export class DevisComponent implements OnInit {…
Buu97
  • 158
  • 2
  • 15
0
votes
1 answer

mat-stepper inside a ngbmodal issue

I have a used a mat stepper inside an ngbmodal and my aim is to create a stepper feature. however the steps i need are not linear and based on selections you may go back and forth. for Example step 1 button - click to go to step 2 button - click to…
0
votes
1 answer

Change unselected mat-step color Angular?

I use the following css for the selected mat-step: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } It works fine but I need to change the blue ones: Tried with: ::ng-deep .mat-step-header .mat-step-icon { …
Iñigo
  • 1,877
  • 7
  • 25
  • 55
0
votes
0 answers

Instead of icon , text is coming in mat-step in Angular6

I am trying to implement Angular Material's stepper.I am just following "https://stackblitz.com/angular/maxbjapeayr?file=app%2Fstepper-states-example.ts" this and doing. But why i am not able to see icon here. And if i want to add custom icon how…
ananya
  • 1,001
  • 6
  • 33
  • 50
0
votes
0 answers

Angular material - mat stepper

Getting 'expressionchangedafterithasbeencheckederror: expression has changed after it was checked. previous value: 'stepcontrol: undefined'. current value: 'stepcontrol: [object object]' in the line where I used child component's form references as…
Jobelle
  • 2,717
  • 1
  • 15
  • 26
0
votes
1 answer

Angular material 7: Cannot correctly select radio buttons inside component using keyboad

I'm developing an app with Ionic 4/Angular 7/Angular Material 7. In a screen there's a stepper. Inside each stepper there's complex forms. Given its complexity I put this form inside components. Inside the second step there's a radio group. When I…
Natanael
  • 1,326
  • 5
  • 17
  • 34
0
votes
2 answers

Browser back and forward button for each step in Angular material Stepper

I have a stepper that loads child components. I want the user to be able to press the browsers back and forward button when they want to go back or forward a step. My guess is using the Location service in @angular/common and storing it the…
-1
votes
1 answer

Angular Material: vertical mat-stepper from bottom to top

I would like to build something like a status display with the help of the material component mat-stepper (using vertical orientation). I also would like to have the vertical steps go from bottom to top instead of top to bottom. However I haven't…
Patrice
  • 19
  • 4
-1
votes
1 answer

HI how can save or store the state/step in mat-stepper ,when i refresh the page it come from initial step/beginning

I have put many reative form on mat-steps in angular 12 but it comes in initial step on refresh page,how can i save the state whereas i refresh the page,any idea?
manoj sahni
  • 35
  • 1
  • 7
-1
votes
1 answer

How to control switching steps when the user click's on the indicator

I need to add some logic in order to decide whether the user can change the step by clicking the indicator ( the step number ) or not. I'm trying to find if there's some callback that fires every step change but also lets you prevent changing the…
-1
votes
3 answers

Angular Material Stepper custom icons ng-template has undefined context variable

I am trying to use an ng-template with the matStepperIcon property to override the default Angular Material's matStepper's icons. I also want to pass some data, and I tried using ng-container and *ngTemplateOutlet, however it only partially…
Michael
  • 876
  • 9
  • 29