How to programmatically trigger all mat-ripples?

Question

So, I found out how to programmatically trigger one ripple effect, but how do I trigger ALL mat-ripples present in a template?

I found here how to do this for one (with a handy stackblitz): https://stackoverflow.com/a/52959049/2362818

Thank you.

Answer 1

You can use ViewChildren and QueryList to query all the elements in the component of a specific type. You can then iterate over them and call launch (or anything else you need) on all or any of the items in the collection.

Working stackblitz

---

list-overview-example.ts

import {Component, ViewChildren, QueryList} from '@angular/core';
import {MatRipple} from '@angular/material';

@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {
  @ViewChildren(MatRipple) 
  ripple: QueryList<MatRipple>;

  triggerRipple() {
    this.ripple.forEach(_ => _.launch({centered: true}));
  }
}

list-overview-example.html

<mat-list role="list">
  <mat-list-item matRipple role="listitem">Item 1</mat-list-item>
  <mat-list-item matRipple role="listitem">Item 2</mat-list-item>
  <mat-list-item matRipple role="listitem">Item 3</mat-list-item>
</mat-list>
<button mat-raised-button color="accent" (click)="triggerRipple()">Trigger Ripple</button>