Animation Callbacks

Angular provides animation lifecycle events:

• start
• done

TypeScript

import { Component } from "@angular/core";

@Component({
  selector: "app-callback",
  standalone: true,
  templateUrl: "./callback.component.html",
})
export class CallbackComponent {
  onAnimationStart() {
    console.log("Animation started");
  }

  onAnimationDone() {
    console.log("Animation finished");
  }
}

HTML

<div @fadeAnimation (@fadeAnimation.start)="onAnimationStart()" (@fadeAnimation.done)="onAnimationDone()">Animated Element</div>