In a Carousel, when circular carousel is selected, this causes the first and last objects in the carousel to be cloned. I guess this is to enable some animation effects when crossing the circle limit.
This can cause problems with the item template that loads and operates on some objects like videos. The objects in the cloned parts will be loaded for the second time and it is not clear which objects are displayed when operating the carousel - the original or the cloned. This makes it impossible to operate reliably on the objects. For example, invoking video play/pause commands on the loaded videos may be directed at wrong objects (duplicated or not, depending which one is displayed).
Other problem is that those objects are actually loaded twice, so unnecessary memory consumption results.
Environment
Electron app on MacOS, but this does not matter here.
Reproducer
No response
Angular version
17.0.8
PrimeNG version
17.3.1
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
21.5.0
Browser(s)
Chrome
Steps to reproduce the behavior
Create a carousel with a template that displays html video, pass the video object to TS to operate on the video, for example in a (loadeddata) event handler. The handler will be called multiple times for first and last object in the carousel. It won't be clear which video object should stored to later operate on it.
Real use case can be - automatically start the video from the beginning when page is changed.
Expected behavior
I think it should not expose the internal implementation details to the behaviour of the application.
The item template should be applied once for each carousel item.
Describe the bug
In a Carousel, when circular carousel is selected, this causes the first and last objects in the carousel to be cloned. I guess this is to enable some animation effects when crossing the circle limit. This can cause problems with the item template that loads and operates on some objects like videos. The objects in the cloned parts will be loaded for the second time and it is not clear which objects are displayed when operating the carousel - the original or the cloned. This makes it impossible to operate reliably on the objects. For example, invoking video play/pause commands on the loaded videos may be directed at wrong objects (duplicated or not, depending which one is displayed). Other problem is that those objects are actually loaded twice, so unnecessary memory consumption results.
Environment
Electron app on MacOS, but this does not matter here.
Reproducer
No response
Angular version
17.0.8
PrimeNG version
17.3.1
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
21.5.0
Browser(s)
Chrome
Steps to reproduce the behavior
Create a carousel with a template that displays html video, pass the video object to TS to operate on the video, for example in a (loadeddata) event handler. The handler will be called multiple times for first and last object in the carousel. It won't be clear which video object should stored to later operate on it. Real use case can be - automatically start the video from the beginning when page is changed.
Expected behavior
I think it should not expose the internal implementation details to the behaviour of the application. The item template should be applied once for each carousel item.