AnimationPlayer onStart and onDone events emit only once

[MurhafSousli]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

AnimationPlayer onStart and onDone events emit only once, a new player has to be created to get the events to work again

Expected behavior

AnimationPlayer onStart and onDone events should work again after the first play

Minimal reproduction of the problem with instructions

  this.animationBuilder.build([
      query(
        '.child-element',
        [
          stagger(100, [useAnimation(animation)])
        ]
      )
    ]);
    this.player = builder.create(this.el.nativeElement);
    this.player.onStart(() => {
      console.log('animation onStart');
    });
    this.player.onDone(() => {
      console.log('animation onDone');
    });

https://stackblitz.com/edit/angular-bynhgg?file=src/app/app.component.ts

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

Be able to reuse the player

Environment

Angular version: 7.0.0


Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8  
- Platform:  Windows

Others:

Could be related to #26095

[crushjz]

This is really annoying, as it defeats the reusability purpose of the AnimationPlayer.

Angular 8.0 issue reproduced here: https://stackblitz.com/edit/angular-na3vhi

[peternixey]

I've discovered that you can make the same player emit again but you need to register the callback for every single play.

this.releasedOver$.subscribe(() => {
  this.animation.play()
  this.animation.onDone(() => this.animation?.reset())
})

I'm rolling with this as a solution for the time being but if and when you solve this problem it would be great if it ships with a deprecation warning so that I (/we) don't end up with memory leaks. Thank you!

[dario-piotrowicz]

Hello, I have opened an attempt to fix this issue, what I came up with was allowing the callbacks to be called after the animation gets reset

So for example this is the current behavior:

Which I updated to this:

I could have changed things so that the callbacks would be always called without the need to reset the animation, but that would basically auto-reset the animation after it has completed, which I'd imagine we don't want (and would make the reset function almost noop).

So I think/hope this makes sense and hopefully it can help with the situations described in this thread 🙂 , please let me know what you think 🙏

[angular-automatic-lock-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.}