Angular 4 animate parent and child components at the same time -

i've written plunk illustrate issue: link

i need animate parent component, , @ same time want make animation in child component. seems angular blocking animation on child component, , jumps states after parent animation ends without transition.

is there way make animations work in parallel, or @ least chain without using callbacks?

@component({   selector: 'outer',   template: `     <div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;">       <inner [stateinner]="state"></inner>     </div>`,   animations:[     trigger('state', [       state('narrow', style({         width: '100px'       })),       state('wide', style({         width: '400px'       })),       transition('* => *', animate('500ms'))     ])     ] }) export class outer {   public state: string = 'narrow';   constructor() {   } }   @component({   selector: 'inner',   template: `     <div [@stateinner]="stateinner">       <h2>hello</h2>     </div>`,   animations:[     trigger('stateinner', [       state('narrow', style({         height: '100px'       })),       state('wide', style({         height: '400px'       })),       transition('* => *', animate('500ms'))     ])     ] }) export class inner {   @input() stateinner: string = 'narrow';   constructor() {   } } 

i'd using callbacks the best way handle future code, if need work trick use onchanges, simplechanges, , settimeout().

working plunker show how works, inner div main changes in code:

imports

import {component, input, onchanges, simplechanges} '@angular/core' 

template

  template: `     <div [@stateinner]="localchange">       <h2>hello</h2>     </div> 

class export

  localchange = 'narrow';    ngonchanges( changes: simplechanges ) {     console.log(changes)     settimeout( () => this.localchange = changes.stateinner.currentvalue, 500);   }