Programmatically trigger ripple on Angular material icon button

Question

I have two angular material buttons. My goal is to programmatically let the button ripple when a certain key is pressed.

Take a look at the stack-blitz project: https://stackblitz.com/edit/angular-material-button-vphppo

Is there a way to let the button ripple on click or on key-press exactly one time?

I tried these examples How can I programmatically trigger ripple effect on Angular MatListItem?

But this lets the button ripples two time on click.

Thank you. I should have use `@ViewChild('btnNext', {static: false}) btnNext: MatButton;` instead of MatRipple — Franz Peter Tebartz van Elst, Mar 10 '20 at 14:50

Z. Bagley · Accepted Answer · 2020-03-10T14:20:18.747

1

MatButton provides direct access to the Ripple in the current Material:

  @ViewChild('btnNext', {static: false}) btnNext: MatButton;

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    if( event.key === 'a') {
      this.btnNext.ripple.launch({centered: true})
    }
  }

The above will proc the ripple when 'a' is pressed.

https://stackblitz.com/edit/angular-3xgxiw

edited Mar 10 '20 at 14:20

answered Mar 10 '20 at 13:31

Z. Bagley

8,942
1
40
52

But it should ripple on keydown. Not on clicking another button. – Franz Peter Tebartz van Elst Mar 10 '20 at 13:34

Programmatically trigger ripple on Angular material icon button

1 Answers1