carousel no working properly when using *ngfor to display dynamic data

Flickity is a very good carousel, but I'm having an issue using it in angular

when using static data it works good (sometimes it's not showing properly and after reloading it works)

but when using a dynamic data returned from a service it shows all slides and images as a one block with no slides

how to fix this issue ?

code i'm using

<div class="carousel cssanimation sequence fadeInBottom"
  data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'>

  <a href="" *ngFor="let show of RecentReleases">
    <img class="carousel-cell" [src]="show.largePoster" alt="poster">

    <div class="movie-info d-flex flex-column align-items-start">
      <p class="title">{{show.title}}</p>
      <div class="genres d-flex flex-row" *ngFor="let genre of show.genres">
        <p class="genre">{{genre}}</p>
        <p class="separator">|</p>
      </div>
    </div>
  </a>

</div>

and my ts code

 RecentReleases?: IShow[];
  ngOnInit(): void {
    this.homeService.getRecentReleases().subscribe((shows) => {
      this.RecentReleases = shows;
    });
  }

metafizzy / flickity

carousel no working properly when using *ngfor to display dynamic data #1235