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
Jonas
Hi Jonas,
Greetings from Syncfusion support.
S.No |
Query |
Solution |
|
1 |
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.
|
|
2 |
“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
Thank you very much for the help!
I was able to fix the problems.
Hi Jonas,
Glad to know your issue has been resolved. Please get back to us in future for further assistance.
Regards,
Indhumathy L