How to add carousel-item after http request

[jaimeplier]

First of all thank uoy for all the effort put into maintaining this extension, It's very helpfull. I have a setup as follows:

<div #carousel class="carousel carousel-slider center" materialize="carousel" 
      [materializeParams]="[{transition: 1000, interval: 6000}]">
        <a class="carousel-item" *ngFor="let url of imageURLs">
            <img [src]="url" >
        </a>
      </div>

I have tried using the example code that is inside this project:

....
  @ViewChild('carousel', {static: false }) carouselElement;
...
window.setTimeout(() => {
      this.imageURLs = [this.imageURLs[0], ...this.imageURLs]; // duplicate the first iamge
      this.carouselElement.nativeElement.classList.toggle('initialized')
      this.actions.emit('carousel');
      this.actions.emit('carousel-slider');
    }, 1000);

The result is an item fixed to the background that doesn't respond to carousel events, my question is, what is the proper way to add this items?