Keep Angular Material Mat Ripple Animation After Clicked

Question

I use mat-list with matRipple for click animations. Normally, mat ripple animations disappear after a while, it can be controlled with RippleGlobalOptions but I want to keep animation after clicking so background color won't change. So, is there any possible way to keep background style?

    <mat-list #selectable
              role="list">
                <mat-list-item *ngFor="let item of ItemsSource; let i = index;"
                               (click)="OnRowClicked(item)"
                               role="listitem"
                               matRipple>
                    {{item["Description"]}}
                    <mat-divider></mat-divider>
                </mat-list-item>
    </mat-list>

  public ItemsSource = [{Description: "test", Code: "1" },
                        {Description: "test2", Code: "2" }];

  public SelectedItem: any;

  public OnRowClicked(event: any) {
      this.SelectedItem = event;
    }  

The Fork: https://stackblitz.com/edit/angular-vrus3x

Answer 1

You can use Manual Ripples.

class MyComponent {

  /** Reference to the directive instance of the ripple. */
  @ViewChild(MatRipple) ripple: MatRipple;

  /** Shows a centered and persistent ripple. */
  launchRipple() {
    const rippleRef = this.ripple.launch({
      persistent: true,
      centered: true
    });

    // Fade out the ripple later.
    rippleRef.fadeOut();
  }
}

Here is a stackblitz I found on google.