I am working on an AngularJS to Angular upgrade and we have a hybrid app at the moment that is being bundled up with webpack instead of just angular cli. This has led to problems where we have not been able to get css or scss files to correctly bundle up and be accessible from our upgraded components in styleUrls.

So we have been adding styles in the template with tags. The styles that need to be added look like this: (this is just a sample of some of the styles)

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};
    }
`

Colors can be set by users in the front end and loaded through our config for a customized experience.

Unfortunately, I haven’t found a way where you can include these in a style tag in the template and access angular variables like {{config.TableRowCurrentUserTextColor}}. It doesn’t resolve to the proper value.

So, I go this working by building a style tag in the component and appending it into the component on ngOnInit.

const myWidget = document.getElementById(this.widgetId) as HTMLElement;
myWidget.appendChild(styles);

This works and lets me access my component config variable, but when styles are loaded in like this through append, they are not properly encapsulated by the Emulated view encapsulation so the styles can leak out and affect other components.

Is there any way to actually access these component variables from style tags in the template? I have not found a way that works… Or is there a way to get the component to re-encapsulate itself and re-evaluate the styles to encapsulate them after appending them?