Animations on parent component break ":leave" animation built-in into child component

[ilyakonrad]

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

No

Description

When you have animations set up in a parent component like this

@Component({
  selector: 'app-parent',
  styleUrls: ['./parent.component.scss'],
  templateUrl: './parent.component.html',
  // ↓ This property breaks inner :leave animations.
  animations: [/* The content doesn't matter */]
})
export class ParentComponent {}

child's :leave animation doesn't work:

@Component({
  selector: 'app-child',
  styleUrls: ['./child.component.scss'],
  templateUrl: './child.component.html',
  encapsulation: ViewEncapsulation.None,
  host: { tabindex: '0', '[@childAnimation]': '' },
  animations: [
    trigger('childAnimation', [
      transition(':enter', [group([ ... ])]),
      transition(':leave', [group([ ... ])])
    ])
  ]
})
export class ChildComponent {}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-sz1b4r

Please provide the exception or error you saw

I saw a lack of a beautiful ":leave" animation :(

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.2.10
Node: 18.12.1 (Unsupported)
Package Manager: yarn 1.22.19 
OS: win32 x64

Angular: 14.2.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker    

Package                            Version     
------------------------------------------------------------
@angular-devkit/architect          0.1402.10   
@angular-devkit/build-angular      14.2.10     
@angular-devkit/core               14.2.10     
@angular-devkit/schematics         14.2.10     
@angular/cdk                       14.2.7      
@angular/cli                       14.2.10     
@angular/fire                      7.4.1       
@angular/material                  14.2.7      
@angular/material-moment-adapter   14.2.7      
@schematics/angular                14.2.10     
rxjs                               7.5.7       
typescript                         4.8.4       
webpack                            5.75.0

Anything else?

I don't know if this is a regression. I added more info on how to reproduce the issue in the Stackblitz.

[Char2sGu]

True. This issue bothered me for a long time and I thought it was a feature 😂

Btw I think that the project that I'm working on in this repository might interest you. I'm implementing the "Reply" application of Material Studies with a lot of super cool animations!

[jessicajaniuk]

I'm going to close this as a duplicate of #23302. We'll probably create a canonical issue to track this.

[ilyakonrad]

The duplicate has been open for years, is it on any agenda yet?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}