title: Angular how to delay/stagger the animation inside of child components
body: <p>I have a child component with animations</p>
  
  <p><strong>child.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child',
    animations:[
      // animations
     ]
  })
  export class ChildComponent { ... }
  </code></pre>
  
  <p>And a parent component, which has 2 of the child components in the html</p>
  
  <p><strong>parent.component.hmtl.ts</strong></p>
  
  <pre><code>...
  &lt;child&gt;&lt;/child&gt;
  &lt;child&gt;&lt;/child&gt;
  ...
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-exsnzr" rel="nofollow noreferrer"><strong>Stackblitz Example</strong></a></p>
  
  <p>What I want to achieve is to stagger the animations of the child components in the parent component. Therefore second child component should start animation after X seconds.</p>
  
  <p><a href="https://angular.io/api/animations/animateChild" rel="nofollow noreferrer">animateChild()</a> sounds like it might work but I cant figure out how I can use it. Is that the right solution? If so an example would be really helpful.</p>
  
  <p>Thanks in advance</p>
  
  <p><strong>EDIT</strong>: animateChild() does not seem to work for this case. Appearantly it only works on animations that are defined in the parent component.</p>
  
  <p><strong>EDIT2</strong>: I think there might be a workaround by adding a delay to the animations inside of the child components.</p>
  
  <p><strong>child.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'child',
    animations:[
      animate(x),
      // animations
     ]
  })
  export class ChildComponent { ... }
  </code></pre>
  
  <p>The x would be a variable that would increase for every child component.
  This workaround looks kinda messy to me</p>
  
  <p><strong>EDIT3:</strong> the anwers so far are more or less the solution i mentioned in my second edit. While those do work I still consider those as workarounds. </p>
  
  <p>I am looking for a solution that only involves the parent component therefore the child component should stay the way it is like in <a href="https://stackblitz.com/edit/angular-q75u1p?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">this non working example</a></p>