BUG: animate.enter not performed for dynamically created components #63901
Description
Which @angular/* package(s) are the source of the bug?
animations, core
Is this a regression?
Yes
Description
When you create component dynamically which has animate.enter attached to it either directly using host or using hostDirective or using directives argument from createComponent, css class for animate.enter is set to created html element but it looks like it is set too late, because it is not executed. It looks like bad timing or something like this.
As you can see here
At top you can see two components that are rendered in final form and 2 components that are being animated.
As you can see in html below there are two <div class="test fly-in"><div> rendered at same time but one is animated and other one is not. One that is not animated was created using ViewContainerRef.createComponent method.
In all examples you can see animate.enter is not animated but in browser dev tools you can see that css class is there, but not when element was attached to html, because it is not animated.
Example 1
Using host directly
ab.component.ts
import {Component, ChangeDetectionStrategy} from '@angular/core';
/**
* Component
*/
@Component(
{
selector: 'div.test',
templateUrl: 'ab.component.html',
host:
{
'animate.enter': 'fly-in',
'animate.leave': 'fly-out',
},
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AbComponent
{
}render it using
this.viewContainer().createComponent(AbComponent);Example 2
Using host directive
animate.directive.ts
import {Directive, input, InputSignal} from '@angular/core';
/**
* Animate directive
*/
@Directive(
{
selector: '[animate]',
host:
{
'[animate.enter]': 'enterAnim()',
'[animate.leave]': 'leaveAnim()',
},
})
export class AnimateDirective
{
public enterAnim: InputSignal<string|string[]> = input<string|string[]>('fly-in');
public leaveAnim: InputSignal<string|string[]> = input<string|string[]>('fly-out');
}ab.component.ts
import {Component, ChangeDetectionStrategy} from '@angular/core';
import {AnimateDirective} from '../../directives/animate/animate.directive';
/**
* Component
*/
@Component(
{
selector: 'div.test',
templateUrl: 'ab.component.html',
hostDirectives:
[
AnimateDirective,
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AbComponent
{
}render it using
this.viewContainer().createComponent(AbComponent);Example 3
Using directive argument of createComponent
import {Directive, input, InputSignal} from '@angular/core';
/**
* Animate directive
*/
@Directive(
{
selector: '[animate]',
host:
{
'[animate.enter]': 'enterAnim()',
'[animate.leave]': 'leaveAnim()',
},
})
export class AnimateDirective
{
public enterAnim: InputSignal<string|string[]> = input<string|string[]>('fly-in');
public leaveAnim: InputSignal<string|string[]> = input<string|string[]>('fly-out');
}cd.component.ts
import {Component, ChangeDetectionStrategy} from '@angular/core';
/**
* Component
*/
@Component(
{
selector: 'div.cd',
templateUrl: 'cd.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CdComponent
{
}render it using
this.viewContainer().createComponent(CdComponent,
{
directives:
[
AnimateDirective,
],
});What is event weirder is that when you do this.
this.viewContainer().createComponent(CdComponent,
{
directives:
[
{
type: AnimateDirective,
bindings:
[
inputBinding('enterAnim', () => 'slide-in'),
inputBinding('leaveAnim', () => 'slide-out'),
],
},
],
});css class slide-in stays there permanently.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 20.3.2
Node: 22.16.0
Package Manager: npm 10.9.2
OS: Windows 11 x64
Angular: 20.3.1
Anything else?
No response