4

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

midowu
  • 937
  • 5
  • 19
  • 40
  • Possible duplicate of [Remove the Material Stepper header](https://stackoverflow.com/questions/51716812/remove-the-material-stepper-header) – Alex Sep 15 '19 at 20:11

1 Answers1

6

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;
}
nash11
  • 8,220
  • 3
  • 19
  • 55
  • when I added as you advised the all the buttons (previous and next) did not display again. I only want to hide the label and icon. Can you show me a sample with my code? – midowu Sep 15 '19 at 21:58
  • 1
    @ nash11 - where do I add .mat-horizontal-stepper-header-container { display: none !important; } – midowu Sep 16 '19 at 00:49
  • Add it to your component's styles. If your component uses a css file for styles, then put it in that file. – nash11 Sep 16 '19 at 03:29
  • 2
    To hide the header, in your component styles use: ```:host ::ng-deep .mat-horizontal-stepper-header-container { display: none; }``` – Todor Todorov Oct 30 '19 at 10:47
  • 1
    @TodorTodorov Thanks, Here is the SCSS version that may help someone `:host { ::ng-deep { .mat-horizontal-stepper-header-container { display: none; } } }` – Abhinav Kinagi Mar 06 '23 at 07:49