Dots/Sliding don't work when updating images data

[nbastidas]

Hi, great work with this carousel. I found an issue though:

For using this carouse I use a ngIf as you can see in the code below.

<div *ngIf="element.photos">
    <ui-carousel [infinite]="true" [fade]="true" [speed]="200" height="500px">
        <ui-carousel-item *ngFor="let photo of element.photos" >
            <img [src]="apiUrl + photo.photo_id" draggable="false">
         </ui-carousel-item>
    </ui-carousel>
</div>

The issue comes when I update the number of photos. If I start with 2 photos and then I change the number of photos to 10, I still see 2 dots and can't see more than 2 photos, even when I can see in the inspector the 10 photos loaded.

If the condition of the ngIf is false, and then it changes to true the carousel reloads and the dots and photos are ok, but if I change the number and the ngIf is always true, it doesn't reload.

It seems like the carousel is not updating the dots or some condition that allows seeing all the images.

[msarsha]

As a workaround you can try injecting the ChangeDetectionRef and invoking .detectChanges() after the images array changed.

[nbastidas]

I can detect changes in the images array but what I don't know is how to make the carousel "reload".

I mean, the carousel actually changes the photos but when you click the arrows for viewing another photo it does nothing and always show the first one. And it happens every time the array of images changes.

[msarsha]

Are you adding items to the photos array?

[nbastidas]

I'm changing all the items in the array. In my component I have

element: Element;

And this variable that contains the array of photos is going to change. Photos are part of the element as you can see in the ngFor of the code above.

*ngFor="let photo of element.photos"

User can request a new element with different photos. When the array element changes and so does the array, is when the carousel doesn't reload properly.

[msarsha]

Can you post the code that updates the photos?

[nbastidas]

In my component.ts I have a http request:

requestElement() {
    const param = {
      transaction: this.transaction,
    };
    this.transactionService.submitTransaction(param)
      .subscribe((result: any) => {
          this.element = result.json[0];
    });
}

[msarsha]

Just checked the code and I have an idea for a PR that will allow updating the items

[javid-abd]

How do you implement the npm package? DOC lacks to show how to import the module

[JLNNN]

Any updates on this? I've got the same issue :/

[priatelko]

I have same issue. Is there any solution to update image data with refreshing the carousel?

Anyway, not just dots are break, but also images are'nt visible, and sliding is not possible.

@nbastidas Did u solve it?

[nbastidas]

Nope @priatelko , I couldn't solve it. I stopped working on the project where I was using this.

[mjrdnk]

Did someone managed to re-render this carousel after items change? I have the same issue - items re-load breaks carousel.

I found out that window resize helps immediately. But that's very hacky...

Anybody?

[mjrdnk]

Follow up to my previous message. I've wrote a hacky solution.

Basically what you want is to rePosition() carousel.

here rePosition method in line 351 of ui-carousel:

https://github.com/bougarfaoui/ui-carousel/blob/master/ui-carousel/ui-carousel.component.ts

Is triggered by:

@HostListener('window:resize', ['$event'])
    onResize(event: any) {
        this.rePosition();
    }

So call this after you re-assign your items:

setTimeout(() =>
    window.dispatchEvent(new Event('resize'))
);

As I said... this is ugly, but works - carousel will shortly flicker but be normal back again.

Hope this helps some of you.