We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TimePicker NgFor Performance Issues

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,

3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team January 17, 2023 04:28 PM UTC

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.

PL Peter Linecker January 18, 2023 09:40 AM UTC

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,

UD UdhayaKumar Duraisamy Syncfusion Team January 26, 2023 10:14 AM UTC

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.

Live Chat Icon For mobile
Up arrow icon