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:

.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

score 37 · Accepted Answer · answered Aug 06 '18 at 23:32

37

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

answered Aug 06 '18 at 23:32

Simon K

2,762
1
11
20

1

But it still stays in the dom. This is not an ideal solution. Just saying, I don't know a better one. – King Julien Jan 16 '19 at 14:32
7

Adding !important to the css is bad practice, because the important styles are rendered after the original once. That causes browser to render the html element twice. My advice is to use: ```css :host ::ng-deep .mat-horizontal-stepper-header-container { display: none; } ``` – Todor Todorov Oct 30 '19 at 10:44

Md Rafee · Answer 2 · 2019-09-16T11:49:21.967

7

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

edited Sep 16 '19 at 11:49

answered Jun 27 '19 at 11:22

Md Rafee

5,070
3
23
32

score 3 · Answer 3 · answered Sep 17 '21 at 16:46

3

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>

answered Sep 17 '21 at 16:46

baHI

1,510
15
20

score -1 · Answer 4 · answered May 20 '21 at 06:05

-1

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

answered May 20 '21 at 06:05

MrPopai

1

This answer has already been provided and is a duplicate. – Timothy Alexis Vass May 20 '21 at 07:23

score -7 · Answer 5 · answered Aug 06 '18 at 23:23

-7

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

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

answered Aug 06 '18 at 23:23

dev-assassin

271
2
13

5

That removes the content of the stepper also. I only want to remove the top navigation. – RV. Aug 06 '18 at 23:31

Remove the Material Stepper header

5 Answers5

Linked