how to disable ripple effect from stepper in angular 6/7/8/9/10/11/12/13, is their is an option to remove ripple like tabs and button

user_9606037 0
Viewed 3021

The header of step that can be clicked to select the step that time ripple is coming I want to remove or disable the ripple from this stepper.

<mat-vertical-stepper>
  <mat-step label="Step 1">
    Content 1
  </mat-step>
  <mat-step label="Step 1">
    Content 2
  </mat-step>
</mat-vertical-stepper>

Please also explain me how this properties is working . Whether ripples should be disabled for the step headers.

@Input()
disableRipple: boolean
angular7 sass css
2 Answers
<mat-vertical-stepper [disableRipple]="true">

does it. See it here.

user_18916770
  • It's not rocket science to remove ripple effect while on click of mat-stepper or changing that step. We can do it by little CSS hacks also.
  • Angular adds some of the CSS class while we click on the an element so we can changes it in this way.

.mat-step-header:hover{
    background-color: white !important;
}
.mat-step-header.cdk-program-focused {
      background-color: white;
  }
.mat-step-header.cdk-mouse-focused{
    background-color: white;
}
.mat-step-header.cdk-focused{
    background-color: white;
}
user_110671820
Related