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

ExpressionChangedAfterItHasBeenCheckedError with Sliders and no view update after display switch

Hello Syncfusion team,

I have two problems occuring with the Syncfusion Slider.  

I have a dialog item component that can turn into different types of dialog items (e.g. textbox, dropdown, checkbox, slider, ...). Furthermore I have a global setting to turn all dialog items from "floating-label" to "side-by-side-label" mode. Therefore I always switch between two HTML Templates that share the same component variables.

The following stackblitz is a simplification of that and should clarify my two issues: https://stackblitz.com/edit/angular-slidernew-665r3k?file=app.component.html

My implementation seems to work with all dialog items except the slider, which does not update the view of the side-by-side-slider. 

Issue 1)
You can see the issue by hitting the SBS-button in the stackblitz. While the side-by-side textbox always has the correct value, the side-by-side slider does not (it always stays at the minimum of the range).

Issue 2)
Also, in my application I dont have the values available in the ngOnInit, so I set these values in the ngAfterViewInit. To prevent 'ExpressionChangedAfterItHasBeenCheckedError', I put my changes into a promise (according to https://angular.io/errors/NG0100). This works for the textbox, but not for the slider. 

Do you have solutions for these issues?

Thanks in advance

3 Replies 1 reply marked as answer

LD LeoLavanya Dhanaraj Syncfusion Team February 20, 2023 04:45 AM UTC

Hi Jonas,

Greetings from Syncfusion support.





side-by-side slider does not show the Slider value

Based on your shared code details, we have validated the reported issue in the Angular Slider component. We suspect that the issue occurs because the Slider component is not refreshed while switching the dialog items(components). We suggest you use the reposition method to overcome the issue by taking an instance of the Slider component inside button click event(switch). For your reference, we have attached the modified sample.


Sample : https://stackblitz.com/edit/angular-slidernew-x8eqe4?file=app.component.html,app.component.ts


Check out the below mentioned code snippets.



<!-- Side-by-Side-Label -->

<ejs-slider id="sliderSBS" #sliderSBS ...></ejs-slider>

<button (click)="switch('sbs')">SBS</button>



switch(mode) {

    if (mode === 'sbs')

    { ...


    } else { ... }



“ExpressionChangedAfterItHasBeenCheckedError” error

The "ExpressionChangedAfterItHasBeenCheckedError" error in Angular occurs when a component property or directive binding changes after Angular has already completed the change detection cycle. This can happen when a change is made to the data that is bound to a template expression outside of the normal Angular lifecycle hooks.


To resolve this issue, you can use a setTimeout function to defer the change until the next tick of the event loop. This will allow Angular to complete the change detection process before the change is made. Also, you can use the ngOnChanges lifecycle hook instead of ngOnInit to watch for changes in input properties. This hook is called before the view is initialized, so it allows you to detect changes before Angular starts the change detection process.


Check out the below mentioned link for further assistance.




Leo Lavanya Dhanaraj

Marked as answer

JC Jonas Czeslik February 22, 2023 12:13 PM UTC

Thank you very much for the help!

I was able to fix the problems.

IL Indhumathy Loganathan Syncfusion Team February 24, 2023 09:56 AM UTC

Hi Jonas,

Glad to know your issue has been resolved. Please get back to us in future for further assistance.


Indhumathy L

Live Chat Icon For mobile
Up arrow icon