CODEWITHSUNDEEP
angularangular-materialangular-directive
Flores
Flores

Reputation: 8932

Angular material: control ripple effect from code

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?

Upvotes: 0

Views: 1526

Answers (1)

yurzui
yurzui

Reputation: 214017

read option should do the trick:

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

See also:

Upvotes: 4

Related Questions