Remove the Material Stepper header

Question

I want to get rid of the header navigation on the material stepper. Please suggest how can I do it? I tried setting the following css but didn\'t seems to work:

Answer 1

you can add this css property in <mat-horizontal-stepper #stepper> like this:

<mat-horizontal-stepper #stepper style="display: none;">
....
</mat-horizontal-stepper>

Answer 2

@Simon K answer is correct. But it will affect all the stepper in your app. But if you want to use it for your specific component, use :host before the ::ng-deep. Then it will not affect other stepper (if any) in your application. For example of @Simon K' answer-

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

Answer 3

You need to use a combination of ::ng-deep to get around shadow DOM and the !important flag to get around Materials own stylings:

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