[SOLVED] How to hide one of the mat-step of Material stepper without removing it from the DOM?

How to hide one of the mat-step of Material stepper without removing it from the DOM?

How to hide one of the "mat-step" from the mat-horizontal-stepper?
I have set this css property:

display:none

but it is not working on "mat-step".

I do not want to remove that element from the DOM, so *ngIf is useless here.

I saw somewhere they use "

::ng-deep .mat-horizontal-stepper-header-container { 
   display: none !important; 
}

But that works for entire . I only want to hide one .

I also tried

<mat-step style="display: none;"></mat-step>

without success.

I have a scenario like below:

<mat-horizontal-stepper>
    <mat-step></mat-step>
    <mat-step></mat-step> // I just want to hide this step
    <mat-step></mat-step>
    <mat-step></mat-step>
</mat-horizontal-stepper>

Solution

To reach the specific mat-step, use :nth-of-type() selector to reach that step via css. No need for the ::ng-deep. You can put this either in the component's css, either in styles.css:

.mat-step-header:nth-of-type(2){ //for example, to remove the second step
  display:none;
}

Demo