Hi,
I need a little help if possible.
I have the following situation: We have "old" angularjs application built using Kendo UI Jquery (and some angularjs) components. We also have the custom theme for the app - based on kendo ui default theme and dark theme built through theme builder.
Recently we decided to slowly migrate to the latest Angular version (and logically) to use Kendo UI Angular. Since we are taking strangling tree approach, we are firstly migrating small individual windows.
To solve this I am basically building "standalone" angular components which I port to the old app. This is not the ideal process, but only possible in the moment.
What I need a help is following: My new standalone component have its styling and import kendo ui theme from Kendo UI Angular. So when I import my component's js file, I have to import its css file as well. Problem is that after I do this import, both of my apps are broken - styles mix up together and override eachother.
Is there any suggestion or a way that I can prevent this - how to intentionally separate things in these two css files to stop overriding eachother?
Thank you
Regards,
Vedad
Hi Vedad,
Generally Angular provides Encapsulation in specific cases to avoid mixing of styles. In such cases the developer would need to explore options related to both frameworks to avoid mixing between component styling in their hybrid applications. There is also an option to scope specific styles to a component which is demonstrated in the following example:
https://stackblitz.com/edit/angular-ivy-tstqqk?file=src%2Fapp%2Fapp.component.html
https://github.com/telerik/kendo-themes/issues/2286#issuecomment-857611404
The developer can also explore the option on Angular elements - https://angular.io/guide/elements
It is worth mentioning that such implementations between Angular and Jquery aren't officially supported by Kendo UI for Angular or Angular framework. In some cases custom taylored solution might be reuqired, and some research from online resources for similar issues.
Regards,
Yanmario
Progress Telerik
Hi Yanmario,
thank you for your reply. However, I am aware of all of these options but none of them was solution to my problem.
Problem is that old app is angularjs/jquery app which have its own css styles file(s) with all styling including kendo ui, on the other side standalone component written in new angular and kendo ui has its own styles css file. Depending on the order of loading these two files in html, later was overriding previous one with the same classes.
However, I have been able to find the solution on my own and I am leaving it here as a reference in case someone needs it.
I imported my kendo ui scss styles in separate mixins file (example: my-mixin.scss), using standard @include.
In my html, I wrapped my whole html "new angular standalone component" in div with specific css class (someone also can use id). Then in my styles.scss file I did the following:
@use "sass:meta"; .my-global-wrapper-class { @include meta.load-css("./my-mixin"); }Thank you very much and regards,
Vedad
Hi Vedad,
I am glad to hear that you have managed to find a solution to the issue in yuor scenario. Thank you for sharing this with the community.
I am sure it will be helpful to others facing the same scenario.
Regards,
Neli