Animation events in HostListeners aren't supported in Angular Elements (yet?)

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Could be considered a bug, but also a feature. You decide 😄

Current behavior

Angular component with built-in animations using Angular animation events in components host listeners aren’t supported. For example Assuming a component with animation events like this:

host: {
 '(@transform)': 'doSomethign',
 '(@transform.start)': 'doSomethignElse'
}

Won’t be triggered by the resulting Angular Element of this component. While native host listener will work. E.g.

host: {
  '(keyup)': 'doSomethignElse'
}

The reason why this isn’t working yet, is because there’s no Custom Element equivalent of Angular’s @foo events.

Expected behavior

Not sure whether I’d expect this to be magically handled by Angular Elements, nor am I sure this is supposed to be supported eventually, but it definitely makes some components not work the way as expected when running them as Custom Elements. That’s why I’m bringing this up here.

What is the motivation / use case for changing the behavior?

We might want Angular Elements to support Angular Animations as well. This affects many of Angular Material’s components.

[alanxone]

@talamaska The HostListener should be given the args to output the data, eg.

	@HostListener('@animate.done', ['$event'])
	animationDone(event: AnimationEvent) {
		// Do something
    }

This should work.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}