Angular 2 - How to dynamically change an entire CSS stylesheet based on URL queryparams

Question

I'm very new to the world of Angular (loving it so far). We have an Angular 1 (JS) app that we plan to convert to the latest Angular 2 (8.3.9) version. One thing that was done in the old app, was make use of the $scope object, and then set the CSS stylesheet link in the root index.html dynamically based on a query parameter in the requesting URL.

Using ngStyle or ngClass to update indiviudal elements in a document it cool, but,

How do we handle changing the entire style sheets on loading the app in Angular 2?

Everything is encapsulated inside the component, and styles specified in the angular.json file are built into the "deployable.js" file. Is it possible to change it at runtime?

This link appears to be the closest example: Generate dynamic css based on variables angular , but still doesn't quite solve the problem at the root index.html file.

The Current OLD Version

Url Arrives:

http://someserver:port/app?css=http://linktoCSs/cssFile.css

css query param is pulled into a global variable and stored on scope called css_url, In index.html (starting page)

<link rel="stylesheet" ng-href="{{css_url}}">

and the app starts using whatever style sheet this link provides.

The NEW Angular 2 (version 8.3.9)

We want to mimic the above behavior that we were able to achieve in the JS version. Pull a URL from a QueryParam pointing to some CSS file, and that CSS URL can be injected into the main index.html to change the entire apps styles in one go, or dynamically access the style-sheet in code to update everything in one go.

In short, we want 1 app that can be styled by a CSS file, based off a queryparam.

All thoughts and comments will be greatly appreciated.

Answer 1

After a lot of digging around, finally found the solution I was looking for. And it was so straight forward, hope this helps others that might be needing to do the same thing..

Get the css path from query params and then Inject the Document into a TS file... append the link to the head of the document.

I did this in a Router Guard using canActivate. I got the query param from the routerstatesnpshot like so:

Inject the DOCUMENT( don't forget the import) in the constructor

http://server.com/xxx&broker=1&client=2&css=http://cssServer.com/my_dynamic_stylesheet.css

   import { DOCUMENT } from '@angular/common';

   @Inject(DOCUMENT) private document: Document

   this.setDynamicStyle(state.root.queryParamMap.get('css'));

    setDynamicStyle(cssURL: string) {
        const head = this.document.getElementsByTagName('head')[0];
        const style = this.document.createElement('link');
        style.id = 'css-styling';
        style.rel = 'stylesheet';
        style.href = `${cssURL}`;
        head.appendChild(style);
    }

Thanks to: https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/