TimePicker NgFor Performance Issues

[Peter Linecker]

Hello Syncfusion-Team,

In my Angular project I have built a dialog in which there are weekdays with timespans (two timepickers) displayed via NgFor for assigning opening hours of companies. The problem is that there are performance issues when many timepickers are being displayed.

I have rebuilt my dialog with the ngfor in this StackBlitz.
As you can see when you switch between "Item 2" and "Item 3" there are no performance issues. But when you switch back to "Item 1" there is a delay of 0.5-1sec. In my Angular app there even is a delay of 1-2 seconds, even when you open the dialog (only when there are approximately more than 16 timepickers being displayed).

I know that the issue is because of the timepickers because I have tried to comment them out and then the switching between the items is very fast but as soon as there are many timepickers the performance is not that great.

Is there a way to improve the performance here?

Kind Regards,
Peter

[UdhayaKumar Duraisamy]

Thank you for bringing this issue to our attention. After reviewing the shared sample project, we have determined that it uses version 17.4.51 of the Syncfusion packages. To resolve the issue, we recommend upgrading your packages to the latest version, which is currently 20.4.43.

If you continue to experience the same issue after upgrading to the latest package version, please provide us with the following details so that we can further investigate the issue and provide you with a prompt solution:

1. The steps taken to replicate the issue with the sample project
2. A detailed explanation of the issue replication steps
3. A video illustration of the issue.

If you have any other questions, please feel free to reach out to us.

[Peter Linecker]

Hello Syncfusion-Team,

I have created a new Stackblitz where I have updated all dependencies to the latest version, but the result is still the same. When I switch between "Item 2" and "Item 3" there are no performance issues. But when I switch back to "Item 1" there is a delay of 0.5-1sec.

Kind Regards,
Peter

[UdhayaKumar Duraisamy]

When using the ngFor directive to create a large number of elements, it can cause a delay in rendering those elements in the DOM. This is because Angular needs to create and render each element, which can take some time depending on the number of elements and the complexity of the elements themselves.

So, in the shared sample, when the use clicks the “Item 1” button, it takes some time to render more number of DropdownList, TimePicker, and checkbox components.