Angular Animations - fade in / out works for DIVs, not fully for child components

Question

In Angular 17,

My parent has this animation

Parent Component - animation configuration

 animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('150ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('150ms', style({ opacity: 0 })),
      ]),
    ]),
  ],

View html element - fully works

When I apply it to the html in the template, this works fine:

   @if(showIcon) {

      <span class="material-symbols-outlined" [@fadeInOut]>
        check_circle
      </span>

    }

Child Component - half works (on fadeIn only)

When applied to a child component though, it only works on the fade in, and immediately cuts out, instead of fades out, when the boolean in the outer @if, switches back to false.

    @if(showChildComponent){
      <app-child-component
        [@fadeInOut]
        [someInput]="Input"
        (someEvent)="handleEvent($event)"/>
    }
  }

Is this a bug, or is my approach wrong?

Answer 1

Your code works fine, maybe you are missing to add something, please refer the below stackblitz, kindly replicate the issue and share back, if this answer does not work!

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';
import { trigger, transition, style, animate } from '@angular/animations';
@Component({
  selector: 'app-root',
  standalone: true,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('150ms', style({ opacity: 1 })),
      ]),
      transition(':leave', [animate('150ms', style({ opacity: 0 }))]),
    ]),
  ],
  imports: [ChildComponent],
  template: `
    @if(showChildComponent){
      <app-child
        [@fadeInOut]/>
    }
  `,
})
export class App {
  name = 'Angular';
  showChildComponent = false;

  ngOnInit() {
    setInterval(() => {
      this.showChildComponent = !this.showChildComponent;
    }, 1500);
  }
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

Stackblitz Demo