Angular Material 2 Button Looses Ripple if [backgroundColor] property is set for TabGroup

Question

I have a simple button inside a Tab, if is set the [backgroundColor] property of the Tab-Group, the Button looses it's ripple effect.

Check this Stackblitz for live-demo

<mat-tab-group [color]="primary" [backgroundColor]="'primary'">

  <!-- Try Removing the [backgroundColor] property in the above line
  and click the button to see the ripple effect-->

  <mat-tab label="First">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Third">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

</mat-tab-group>

However, if I remove the [backgroundColor] Property, the button regains its ripple effect.!

<mat-tab-group [color]="primary">

  <mat-tab label="First">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

  <mat-tab label="Third">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

</mat-tab-group>

Am I doing anything wrong?? If not then help me to solve this Problem...

UPDATE:! Setting the color for the button does the trick.. but what if I want to achieve like the below

<mat-tab-group [color]="primary" [backgroundColor]="'primary'">
  <!-- TAB -->
  <mat-tab label="Third">
    <!-- RIPPLE NOT_WORKING -->
    <div class="div-style mat-elevation-z4" matRipple> Not Working </div>
  </mat-tab>
</mat-tab-group>

<!-- RIPPLE_WORKING -->
<div class="div-style mat-elevation-z4" matRipple> Woring </div>

StackBlitz Example

score 1 · Accepted Answer · answered Jan 14 '19 at 12:23

1

If you set to accent color ripple works fine,or set theme color to buttons,ripple effect will show up again with primary theme also.

  <mat-tab-group [color]="primary" [backgroundColor]="'primary'">

  <!-- Try Removing the [backgroundColor] property in the above line
   and click the button to see the ripple effect-->

  <mat-tab label="First">
  <button mat-raised-button color="primary">Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
  <button mat-raised-button color="accent">Button Looses Ripple</button>
 </mat-tab>

 <mat-tab label="Third">
 <button mat-raised-button color="primary">Button Looses Ripple</button>
 </mat-tab>

 </mat-tab-group>

answered Jan 14 '19 at 12:23

Nenad Radak

3,550
2
27
36

Thanks for this workaround.! but **1)** what if i want the button to be plain instead of haning the primary/accent color but still have the ripple effect. (or) **2)** what if I want do place a custom control inside the tab with a
as the root element of the custom control and add ripple effect to the div when the user click on it..?
– Pradeep Jan 14 '19 at 13:01
You can add ripple effect on div tag,if that is 2) question, here is example how to add ripple to div https://material.angular.io/components/ripple/examples – Nenad Radak Jan 14 '19 at 13:20
please check my question and navigate to the bottom part... I've updated my question... – Pradeep Jan 14 '19 at 13:46
Check this stackblitz example [link](https://stackblitz.com/edit/angular-material-ripple-problem) – Pradeep Jan 14 '19 at 14:40
Think that have something to do with theme background color,when you set to primary,selected tab underline is white ,and when you set to accent underline is purple and ripple works.So probably ripple is to transparent to be seen, will have look at that. – Nenad Radak Jan 14 '19 at 14:53
I don't think it has something to do with the theme.. I've forked and edited the Stackblitz directly from the angular material demo. – Pradeep Jan 14 '19 at 14:55
1

If you change backgroundColor to accent on example, ripple on div will also work. – Nenad Radak Jan 14 '19 at 14:57
Wow.. I didn't notice that... thank you..! but what if I want to set primary color.! – Pradeep Jan 14 '19 at 15:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186661/discussion-between-nenad-radak-and-pradeep). – Nenad Radak Jan 14 '19 at 15:01

score 0 · Answer 2 · answered Jan 14 '19 at 18:37

The answer to this question the reason for this behavior and the solution for this problem.!

StackOverflow-Answer

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

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>

Angular Material 2 Button Looses Ripple if [backgroundColor] property is set for TabGroup

2 Answers2