Search⌘ K
AI Features
Home
Courses
Animations in Angular

Events

Explore how to listen to and manage Angular animation events by using start and done callbacks. Understand key AnimationEvent properties and implement practical examples to enhance animation tracking in Angular applications.

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.

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).

HTML
<div
  @slideUp
  (@slideUp.start)="animationStarted($event)"
  (@slideUp.done)="animationCompleted($event)"
></div>

Angular calls the animationStarted and ...