Duplicate items are shown in container

[zgabievi]

There are 4 items in dateSource:

But this is what I'm getting in ui:

UI is rendering 8 items.
If you create dataSource with 4 items, and in setTimeout you override dataSource with the same items, you will get this duplication reproduced.

[UserGalileo]

Same here, unfortunately.
I've got 2 carousels on the same application (and even on the same page) and only one of them is causing me this issue, it must be something related to the configuration and probably to UI/rendering/space calculations.

[otnielgomez]

Hi did you find a solution for this?

[UserGalileo]

My 2 cents: this IS a bug that needs to be fixed.
However, I managed to find a temporary solution for my specific case. In my project, my items came via @Input from the parent component. Putting a setter on the Input I found out that the component received in order:

• 0 items
• 3 items
• 3 items (identical to the previous ones)

And this turned out as 6 items shown in the carousel.

So it seems like the problem is when we reassign items before they become visible, maybe it's a Change Detection problem. In my case I could solve it in 2 ways: assigning the items just once, or using an *ngIf="items && items.length" on the <ngu-carousel> component.

[otnielgomez]

Thanks alot for your answer definitely is when the items are updated, in my case I update the elements of the carousel array and this happens, thanks for the work around i will try it.

BUG:
https://gph.is/g/Z21Ql7b

[otnielgomez]

Ok I think we found a solution, we just remove the changeDetection: ChangeDetectionStrategy.OnPush line. And the carousel won't duplicate the items. It was just that.

[david-blueorange]

I arrived to the same conclusion to otnielgomez above. Before, i attempted to generate a trackBy function, that required me to add item.dataIndex, and item.data, since internally is hardcoded, and yet would not add, delete, change the items properly.

<ngu-carousel #myCarousel [inputs]="nguCarouselConfig" 
  [dataSource]="dataSource" 
  [trackBy]="iTrackBy"
>
...

public iTrackBy(item_dataIndex: number, item_data: any) {
 if (!item_dataIndex) {
    return null;
  }
  return item_dataIndex;
}

ngOnInit() {
    this._dataDiffer = this._differs
      .find([])
      .create((_i: number, item: any) => {
        return this.trackBy ? this.trackBy(item.**dataIndex**, item.**data**) : item;
      });
  }
// in ngu-carousel.component.ts

I needed to investigate further, but can not at this time,... i tracked the possible error to this,

this._dataDiffer = this._differs
      .find([]) <-----------------------------------------------
      .create((_i: number, item: any) => {
        return this.trackBy ? this.trackBy(item.dataIndex, item.data) : item;
      });

Reference links to continue research:

• https://netbasal.com/getting-to-know-angular-differs-60cd68f4bd8f

• https://blog.mgechev.com/2017/11/14/angular-iterablediffer-keyvaluediffer-custom-differ-track-by-fn-performance/

• https://angular.io/api/core/IterableDiffers

[sheikalthaf]

@zgabievi @david-blueorange @otnielgomez can you help me with repro, I can't able to reproduce it