[SOLVED] Listening to an angular animation with RxJS fromEvent

Listening to an angular animation with RxJS fromEvent

Im trying to listen to @animation.done event of an angular animation. I used @HostListener

@HostListener('@animation.done', ['$event'])
    onAnimationDone(): void {
     console.log('Animation Done);
    }

and it was warking fine but now I would like to use fromeEvent from RxJS. I tried:

fromEvent(this.hostElementRef.nativeElement, '@animation.done')
            .pipe(tap(() => console.log('animation end')))
            .subscribe();

Sadly, nothing happens. Animation is applied with @HostBinding:

@HostBinding('@animation') animated = true;

Solution

HostBinding and HostListener can use both regular events and what's referred t by angular in the code as a "synthetic host property" (in our case a "synthetic host event"). These seem to be using metadata and are not actually bound to the host.

Therefore fromEvent, which relies solely on DOM events, cannot detect these.

When you dig into the animations' package code you find that listening relies on the listenOnPlayer function which uses the AnimationPlayer's methods which, if you look at the NoopAnimationPlayer implementation, are just backed by an array of listeners.

Therefore, there's no way to use fromEvent with them. And from what I've seen, the animations' package doesn't provide any rxjs interop or entry point.