3

I want to create a button-like component with ripple animation and it looks like this:

<div>Button</div> 
<material-ripple></material-ripple>

In the past, this works fine because when I click on this custom element, I actually clicks on material-ripple and the click event bubbles to the host element.

As of angular_components 0.5.1, material-ripple shows a centered ripple on keypress. This is different from clicking because the event target is the host element itself and not the ripple component.

Is there a way that I can pass a keypress event down to the material-ripple, so that the ripple animation would be played? Or is there a way to play the animation programmatically?

1 Answer 1

1

After some research, I've come up with a solution using dart:html.

@ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;

@HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
  (materialRipple.nativeElement as HtmlElement).dispatchEvent(
      new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
          .wrapped);
}

Although this does not work in Dartium due to some bugs around KeyEvent and KeyboardEvent, it works fine in Chrome.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.