How can I programmatically trigger ripple effect on Angular MatListItem?

Question

In Angular material you have the lovely ripple effect on a lot of the components. When you click on a mat-list-item the ripple effect happens.

Now with buttons and many

Answer 1

You can try dynamic template reference variable. It works to me.

import { MatRipple } from '@angular/material/core';

export class FooComponent {
    @ViewChildren(MatRipple) rippleList: QueryList;

    ngAfterViewInit() {
        let ripples = this.rippleList.toArray()
        ripples.forEach(res => {
                // res is the instance of each matRipple
        })
    }

}

But It confused to me that I can use it perfect in my project but I can't reappear it in stackblitz:(