Angular material: control ripple effect from code

Question

I know I can trigger the ripple effect on divs, like in this demo

But this only works for the first element with the ripple directive. If I have two elements with the directive, like this:

<div matRipple #rippleOne>
   rippleOne
</div>
<div matRipple #rippleTwo>
   rippleTwo
</div>

Now how do I only trigger the second ripple? Tried this:

@ViewChild(MatRipple)
rippleTwo: MatRipple;
...
this.rippleTwo.launch({});

Which won't work.

Also

@ViewChild('rippleTwo')

won't work. What is the correct way?

score 3 · Accepted Answer · answered Oct 26 '18 at 15:02

3

read option should do the trick:

@ViewChild('rippleTwo', { read: MatRipple })
rippleTwo: MatRipple;

1 Answers1