Currently, I am in the process of upgrading from AngularJS to Angular. Our app is currently a hybrid one being bundled up with webpack instead of just angular cli. Due to this setup, we have encountered issues where our css or scss files are not correctly bundling up and accessible from our upgraded components in styleUrls.
To work around this issue, we have resorted to adding styles in the template using tags. An example of some of the required styles include:
const styles = `
tr.leader td,
tr.leader td .personPopup {
color: ${this.config.LeaderTextColor};
}
tr.leader td {
background-color: ${this.config.LeaderBackgroundColor};
}
tr.current-user td,
tr.current-user td .personPopup {
color: ${this.config.TableRowCurrentUserTextColor};
}
`
Users can set colors on the front end which are then loaded through our config for a personalized experience.
However, I have not been able to find a way to include these styles in a style tag within the template while still accessing angular variables like {{config.TableRowCurrentUserTextColor}}. The values do not resolve correctly.
As a workaround, I have managed to achieve this by creating a style tag in the component and appending it into the component during ngOnInit:
const myWidget = document.getElementById(this.widgetId) as HTMLElement;
myWidget.appendChild(styles);
While this method allows me to access my component config variable, it does not properly encapsulate the styles with Emulated view encapsulation. This results in styles potentially leaking out and affecting other components.
Is there any solution to directly access these component variables from style tags in the template? Thus far, I have not found a viable option that works. Alternatively, is there a way to trigger the component to re-encapsulate itself and re-evaluate the styles post-appending them?