Disable 'Ripple' effect of Angular Meterial Stepper component (when clicking on Tab)

Question

I have an app that uses Angular Material Stepper component.

<mat-horizontal-stepper>

How can I disable 'ripple' behavior on click by step tabs without CSS-hacks?

Thanks!

Answer 1

I assume we are talking about the material2 library as you tagged Angular 6, I will be referencing the Material2 library below.

I looked at the material js library and do not see a stepper.

looking at tab-group.ts as a reference we can look at how the inputs are defined in the constructor... this line specifically accepts disableRipple

 inputs: ['color', 'disableRipple'],

https://github.com/angular/material2/blob/master/src/lib/tabs/tab-group.ts

looking at the stepper.ts for comparison, unfortunately, there currently is not an input to disableRipple in the constructor.

https://github.com/angular/material2/blob/master/src/lib/stepper/stepper.ts

I believe there is no logic to disable ripple on the stepper that I can tell.

• If your preference is to not use CSS hacks, this unfortunately will be a feature request that will need to be submitted.