Animations in Angular/

...

/

Events

Events

Learn how to listen to events emitted by Angular animations and what properties are returned in these events.

We'll cover the following...

Start and done events

Angular animations emit two events that we can listen to. They emit a start event as the animation starts and a done event when the animation completes.

Press + to interact

We can listen to the start and done events by attaching a callback to our element with the animation trigger.

Let’s take a look at an example of an element that has a slideUp animation trigger attached to it (line 2). We’ll then use the trigger name followed by the word “start” to listen to the start event (line 3). Similarly, the done event uses the trigger name followed by the word “done” (line 4).

Press + to interact
<div
  @slideUp
  (@slideUp.start)="animationStarted($event)"
  (@slideUp.done)="animationCompleted($event)"
></div>

Angular calls the animationStarted and ...

Ask