1

Child Controls Loses Ripple Effect if [backgroundColor] property is set for mat-tab-group, is there any workaround.?

Check this Stackblitz example to see the Issue

Pradeep
  • 581
  • 3
  • 11
  • 19

1 Answers1

2

The ripple effect is working but we are not able to see it as the ripple color is white. It is taking white color because you have set backgroundColor to primary and your primary color is blue which has foreground white. The ripple automatically takes this foreground color.

You can solve it by two methods

  1. By providing color to matRippleColor attribute if your backgroundColor set to dark color, in your case its primary and warn.

       <div class="div-style mat-elevation-z4" matRipple matRippleColor="rgba(0,0,0,.1)>Ripple</div>

  2. By setting light backgroundColor. In your case its accent.

Vikash Dahiya
  • 5,741
  • 3
  • 17
  • 24
  • thanks... also could u please tell me how to get the current theme (dark/light)'s ripple color.. I'm using **mixin** and **scss** for component styles... and set it to the matRippleColor. – Pradeep Jan 14 '19 at 18:31