Remove the Material Stepper Header

Remove the Material Stepper header

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

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

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

angular material stepper: disable header navigation

Add this to your style sheet. I was trying to disable the header navigation. Tried many things but this hack worked. You can try this till Angular Material Team support this feature.

::ng-deep .mat-horizontal-stepper-header{
    pointer-events: none !important;
}

How to hide one of the mat-step of Material stepper without removing it from the DOM?

To reach the specific mat-step, use :nth-of-type() selector to reach that step via css. No need for the ::ng-deep. You can put this either in the component's css, either in styles.css:

.mat-step-header:nth-of-type(2){ //for example, to remove the second step
  display:none;
}

Demo

Get rid of navigation in angular material stepper

For Vertical stepper you need to assign different classes.

For removing the stepper header set below style.

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

And removing the border set below style.

.mat-stepper-vertical-line::before { 
  border: 0 !important;
}

How to remove default focus on stepper header in angular material?

Use this directive on the element, where the initial focus is expected: cdkFocusInitial, if this not enough take a look here.

---

Related Topics