Argument of type 'AnimationEvent_2' is not assignable to parameter of type 'AnimationEvent'

Question

I'm trying to make animation callback in angular, and got type error which is easily can be suppressed with type any. I want to understand why AnimationEvent is not accepted by typescript.

My component:

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from "@angular/animations";

@Component({
  selector: 'app-animation-callback',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
      })),
      state('closed', style({
        height: '100px',
      })),
      transition('open <=> closed', [
        animate('.1s')
      ]),
    ]),
  ],
  template: `
    <nav>
      <button (click)="toggle()">Toggle</button>
    </nav>

    <div
      [@openClose]="isOpen ? 'open' : 'closed'"
      (@openClose.start)="onAnimationEvent($event)"
      (@openClose.done)="onAnimationEvent($event)"
      class="open-close-container">
      Text
    </div>
  `,
})
export class AnimationCallbackComponent {
  isOpen = true;
  toggle() {
    this.isOpen = !this.isOpen;
  }

  onAnimationEvent(event: AnimationEvent) {
  }
}

The error while compilation:

 error TS2345: Argument of type 'AnimationEvent_2' is not assignable to parameter of type 'AnimationEvent'.

(@openClose.done)="onAnimationEvent($event)"
                                    ~~~~~~

Answer 1

Try add import in your component:

import { AnimationEvent } from "@angular/animations";

Without import, typescript's native AnimationEvent is used, which is completely different type.