Search code examples
angularangular-animations

Carousel animation not running properly with real data

Taking reference of this thread , I implemented the animation but that was with the dummy data.

enter image description here

Now when the real data comes up (takes around a sec.), animation does not work properly and that is because the animation function is executed before the data comes:

ngOnInit() {
    this.getData();
}

  ngAfterViewInit() {
    this.calculateDimensions();
    this.animateCarousel();     // Animation Function
  }

  getData() {
    timer(1000).subscribe(res => {
      this.data = [
        {
          name: "Max",
          age: 27
        },
        ...
        ...
      ]
     });
  }

I tried to execute the animation function after the data comes, but that is also not working.

getData() {
    timer(1000).subscribe(res => { ...
    });
    this.calculateDimensions();
    this.animateCarousel();
}

Stackbliz link.

Thanks.

Solution

  • So, I was able to get it to work with your last attempt by simply wrapping the 2 methods in a setTimeout function for 100ms...

    However, a better solution would be to listen for dom changes and detect when #card div is loaded...

    https://nitayneeman.com/posts/listening-to-dom-changes-using-mutationobserver-in-angular/