title: angular animation after an http request completly load
body: <p>I have problem with animation on data that comes from an api, for example if i want to achieve an angular 4 stagger animation i need to provide objects.lenght</p>
  
  <pre><code>&lt;div [@listAnimation]="objects.length"&gt;
    &lt;div *ngFor="let object of objects"&gt;
          {{ object?.title }}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the problem is the value of objects.lenght is undifined for about less than a second or maybe more until my http request to api completes!</p>
  
  <p>here is my component</p>
  
  <pre><code> objects: {};
  
    constructor(private _api: ApiService ) {}
  
    ngOnInit() {
      this._api.getAllBlogPosts()
        .subscribe(result =&gt; this.objects= result);
    }
  </code></pre>
  
  <p>and the stagger animation is look like this</p>
  
  <pre><code>import { trigger, state, animate, transition, style , query , stagger , keyframes} from '@angular/animations';
   
  export const listAnimation =  
  
      trigger('listAnimation', [
        transition('* =&gt; *', [
  
              query(':enter' , style({ opacity: 0 }) , {optional: true}),
  
              query(':enter' , stagger( '300ms' , [
                  animate('1s ease-in' , keyframes([
                      style({opacity: 0 , transform: 'translateY(-75px)' , offset: 0}),
                      style({opacity: .5 , transform: 'translateY(35px)' , offset: 0.3}),
                      style({opacity: 1 , transform: 'translateY(0)' , offset: 1})                  
                  ]))
              ]) , {optional: true}),
  
              query(':leave' , stagger( '300ms' , [
                  animate('1s ease-in' , keyframes([
                      style({opacity: 1 , transform: 'translateY(0)' , offset: 0}),
                      style({opacity: .5 , transform: 'translateY(35px)' , offset: 0.3}),
                      style({opacity: 0 , transform: 'translateY(-75px)' , offset: 1})                  
                  ]))
              ]) , {optional: true})
  
          ]),
      ]);
  </code></pre>
  
  <p>   </p>
  
  <p>is there any way to call or run the animation after the call is complete?</p>