4

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 that it removes those steps from the stepper array. This is not good as I need the stepper array to match with an array in my back end logic.

So instead of removing the steps from the DOM completely, I decided to just throw a [hidden]="!myCondition" on the <mat-step>. This does not work. It never will hide the steps, as the steps inherit display: block; from the <mat-vertical-stepper>

Is there any way to overwrite this behavior without completely hiding the whole Stepper? Or is there an alternative way to accomplish this?

CAlex
  • 1,140
  • 2
  • 14
  • 28
  • Have you found a good solution? I'm trying to do the same. – Todd Skelton Dec 10 '18 at 19:16
  • @ToddSkelton Unfortunately not with the original approach I was using. The requirements for my project changed, so I am just using *ng-if to hide the steps dynamically based what data I need to show. I no longer need to match the stepper with a fixed back end array. I have been working with the stepper quite a bit lately, so I would be glad to help out in any way if I can! – CAlex Dec 11 '18 at 01:18
  • I have requirements to show a summary of the form when a step is collapsed. I'm still trying to figure out a good way to do this. I tried using ngIf to remove steps and have fake steps that look like the collapsed step but have content. The problem with ngIf is it removes the step completely and the indices change. – Todd Skelton Dec 11 '18 at 01:23
  • @ToddSkelton Can you use the **@Input() editable: boolean** directive on the stepper, or does the user need to be able to edit the prior step at some point? If you set up a StackBlitz or open a new question with more info I would be happy to take a look. No guarantees though. I feel this is a fundamental flaw with the stepper in its current state. On the other hand, I made my stepper act like a tree component and I understand that is not its typical use. – CAlex Dec 11 '18 at 18:31
  • @ToddSkelton Have you found a good solution? – Alejosaur Dec 31 '19 at 02:11

1 Answers1

2

in case like this i don't think there's a way to achieve that dynamically since there's no option in stepper component in Angular Material for this purpose, the only way to so by CSS but since you want to control their conditions that's not an option for you.

the onther way to do that by hard coding that in TS let's say you have three steps look at this

stepperArr: {label: string, body: string}[] = [{
  label: 'first step',
  body: `<input type="text" placeholder="step1" required>`
},{
  label: 'second step',
  body: `<input type="text" placeholder="step2" required>`
},{
  label: 'third step',
  body: `<input type="text" placeholder="step3" required>`
}];

to control them

if (true) {
  this.stepperArr.push({
    label: 'new step',
    body: `<input type="text" placeholder="step4">`
  });
}
if (false) {
  this.stepperArr.splice(index_start, delete_count);  // index_start: the index of item in array, delete_count: how many items to delete
}

like i said you have in this case to hard coding it with that way you can handle all steps to remove or add to them.

piet.t
  • 11,718
  • 21
  • 43
  • 52
Amir Fawzy
  • 468
  • 5
  • 12