angular animation after an http request completly load

Question

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

<div [@listAnimation]="objects.length">
  <div *ngFor="let object of objects">
        {{ object?.title }}
  </div>
</div>

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!

here is my component

 objects: {};

  constructor(private _api: ApiService ) {}

  ngOnInit() {
    this._api.getAllBlogPosts()
      .subscribe(result => this.objects= result);
  }

and the stagger animation is look like this

import { trigger, state, animate, transition, style , query , stagger , keyframes} from '@angular/animations';
 
export const listAnimation =  

    trigger('listAnimation', [
      transition('* => *', [

            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})

        ]),
    ]);

is there any way to call or run the animation after the call is complete?

I don't know Angular 4, but in 1.x, I would wrap that in a `
` or `` and `ng-show` or `ng-if` based on `objects` being non-null — Mawg says reinstate Monica, Oct 25 '17 at 08:38
Then I will copy the comment to an answer, and you can accept it, to help others in future. Welcome aboard & glad to have been of help — Mawg says reinstate Monica, Oct 25 '17 at 13:46

br.julien · Answer 1 · 2017-10-25T09:47:49.240

You could use the lifecycle hooks of Angular, so that OnInit, you call the method of your service. At that moment you get the information needed. Then you run the animation implementing AfterViewInit.

Check https://angular.io/guide/lifecycle-hooks and https://angular.io/api/core/AfterViewInit

Update 1:

It is possible to implements multiple lifecycle hooks for a component. Let's say your animation has two states (example from https://angular.io/guide/animations), it would look like this :

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

    @Component({
    ...
    animations: [
      trigger('listAnimation', [
        state('inactive', style({
          backgroundColor: '#eee',
          transform: 'scale(1)'
        })),
        state('active',   style({
          backgroundColor: '#cfd8dc',
          transform: 'scale(1.1)'
        })),
        transition('inactive => active', animate('100ms ease-in')),
        transition('active => inactive', animate('100ms ease-out'))
      ])
    ]
})

export class AppComponent implements OnInit, AfterViewInit { 
  ...
  animationState = 'inactive';

  constructor(private _api: ApiService ) {}

  ngOnInit() {
    this._api.getAllBlogPosts()
      .subscribe(result => this.objects= result);
  }
  ngAfterViewInit(){
    // run animation by changing the state
    this.animationState = this.animationState === 'inactive ' ? 'active' : 'inactive ';
  }
}

Thanks for your reply, but i do not get it. is it possible to component implements 2 life cycle hooks? afterViewInit and OnInit both together, and by the way i would be thankful if you could be more specific about running the animation implementing AfterVirewInit. how could i stop stagger animation from executing because it runs quickly and throught error before data being loaded — Ala Shariaty, Oct 25 '17 at 09:07
Thank you so much for your time. but based on solution above i should put animationState into [@listAnimation]="animationState " and then as i mentiond at first question i have an stagger animation witch needs objects.length. Is it possible to write something like this into component html ? [@listAnimation]="{skills.length , animationState }" — Ala Shariaty, Oct 25 '17 at 10:03
Hello, it should be possible in your html to have something that looks like this :
...
https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html — br.julien, Oct 25 '17 at 11:55

score 0 · Answer 2 · answered Oct 25 '17 at 13:46

0

I don't know Angular 4, but in 1.x, I would wrap that in a <div> or <span> and ng-show or ng-if based on objects being non-null

answered Oct 25 '17 at 13:46

Mawg says reinstate Monica

38,334
103
306
551

angular animation after an http request completly load

2 Answers2