Carousel: The [circular] property breaks new data displaying

[benjaminbekes]

Describe the bug

By the scenario of:

1. The carousel contains a set of data like an array of 3 items.
2. You want to update the carousel data array to only 1 item. And you have simultaneously set in the [circular] property that it should be true when the data of carousel length is more than 1.
3. When new data arrive (an array of 1 element only), the carousel displays incorrect data or a buggy one.

• Total time of losing my hair: 3 days

Environment

Angular, IntellJ Ultimate, ...

Reproducer

No response

Angular version

12

PrimeNG version

12

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

17

Browser(s)

chrome

Steps to reproduce the behavior

By the scenario of:

1. The carousel contains a set of data like an array of 3 items.
2. You want to update the carousel data array to only 1 item. And you have simultaneously set in the [circular] property that it should be true when the data of carousel length is more than 1.
3. When new data arrive (an array of 1 element only), the carousel displays incorrect data or a buggy one.

Expected behavior

The new data should be changed independently of the change of the [circular] property.

[volvachev]

Hi, could you make an example on the stackblitz.

[benjaminbekes]

Hello, I haven't much time for creating a fully functional demo. I'll try to explain it in the following code snippet. <p-carousel [value]="data.cell.calendarItems" [showNavigators]="false" [circular]="data.cell.calendarItems.length > 1" [autoplayInterval]="data.cell.calendarItems.length > 1 ? 5000 : 0" *ngIf="data?.cell.calendarItems?.length !== 0"> Take a close focus on the circular property. It should be false when the array length is less than 1. And imagine that the whole data is an @Input in the adjacent typescript file that is being changed. The problem is when the data gets changed. The carousel displays "old, previous" data from the previous data value. Any hack like setTimeout, {...this.data}, or detectChanges() doesn't work.

Summary: The problem is related to the carousel content itself, not to the circular property. But if I had removed the [circular], the problem faded out.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,