CODEWITHSUNDEEP
cssangularangular-materialangular-material2
RV.
RV.

Reputation: 2998

Remove the Material Stepper header

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:

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

Here is stackblitz link of the stepper. https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

enter image description here

Upvotes: 27

Views: 14966

Answers (5)

baHI
baHI

Reputation: 1570

Extend CSS and use additional attribute on the element to hide just specific use-case of it.

mat-stepper[hide-header] .mat-horizontal-stepper-header-container {
  display:none;
}

<mat-stepper hide-header orientation="horizontal" #stepper>

Upvotes: 4

MrPopai
MrPopai

Reputation: 1

The below code is working for hide the mat stepper header. :host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }

Upvotes: -1

Md Rafee
Md Rafee

Reputation: 5530

@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;
}

Upvotes: 7

Simon K
Simon K

Reputation: 2857

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;
}

Upvotes: 38

dev-assassin
dev-assassin

Reputation: 271

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

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

Upvotes: -7

Related Questions