Ripples

matRipple directive adds Material Design ripple feedback to any element.

Basic Ripples

matRipple directive on a div container and on a button.

Click me for ripple effect

Code

Template

TypeScript

<div matRipple style="width:12rem;height:6rem;display:flex;align-items:center;justify-content:center;border:1px solid;border-radius:0.25rem;cursor:pointer;user-select:none;">
  Click me for ripple effect
</div>

<button mat-raised-button color="primary" matRipple>
  Button with Ripple
</button>