Search code examples
angularangular-material-6angular-material-stepperripplejsmat-stepper

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

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!

Solution

  • 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.