CODEWITHSUNDEEP
angularangular-material
midowu
midowu

Reputation: 1057

How to hide mat-stepper header in my mat-stepper?

I am developing an application using Angular-7. In the application, I used Angular material's mat stepper. The question is, how do I hide mat-stepper header as highlighted in the diagram below. I don't want it to appear at all.

<mat-horizontal-stepper>
    <mat-step label="transaction">
        <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="personal">
        <button mat-button matStepperPrevious>Previous</button>
        <button mat-button matStepperNext>Next</button>
    </mat-step>
</mat-horizontal-stepper>

stepper diagram

Upvotes: 5

Views: 16289

Answers (1)

nash11
nash11

Reputation: 8650

Use ngIf to achieve this. If you want to hide a particular mat-step then, place the ngIf on the mat-step.

<mat-step label="transaction" *ngIf="showStep">
    <button mat-button matStepperNext>Next</button>
</mat-step>

If you want to get rid of the entire mat-horizontal-stepper, then place the ngIf on the <mat-horizontal-stepper>

<mat-horizontal-stepper *ngIf="showStepper">

where you can update the value of showStep or showStepper to true or false depending on whether you want to show the stepper or not.

Note: This will remove the content as well.

If you want to remove just the mat-horizontal-stepper headers and keep the content, then you can do so using CSS.

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

Upvotes: 7

Related Questions