How to dynamically import css url in angular

Question

I am working on multi tenant application in angular. For that am trying to apply css from different clients @import url('http://myserver/themes/ABC/css/component1.css');

@import url('http://myserver/themes/DEF/css/component1.css');

I want client name to be fetched from ts file and then import corresponding css.How can I do that?Please help me

Simon · Accepted Answer · 2023-09-25 10:33:38Z

0

Old question, but I came across this today looking for the same thing. In the end, adding an external stylesheet is easiest done by simple DOM manipulation:

  addImport(url: string): void  {
    const linkElement = document.createElement('link');
    linkElement.rel = 'stylesheet';
    linkElement.href = url;
    linkElement.id = this.importedFontUrlStyleId;
    document.head.appendChild(linkElement);
  }

I'm setting this.importedFontUrlStyleId here so later I can remove the stylesheet with

const importedFontSheet = document.head.querySelector(`#${this.importedFontUrlStyleId}`);
if (importedFontSheet) {
  document.head.removeChild(importedFontSheet);
}

The security risk of importing a variable stylesheet should be obvious.

answered Sep 25, 2023 at 10:33

Simon

3,3163 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically import css url in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related