Angular Material Stepper steps cannot be hidden with [hidden]

Question

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?

Answer 1

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.