0

I have a situation where I will have different styles based on different clients/users.

These will all be running from the same site so I will have to load in the style dynamically once I determine which client has logged in.

What is the recommended way of doing this in Angular 2? i.e. I don't want to use jquery?

Thanks

72GM
  • 2,926
  • 3
  • 27
  • 33

1 Answers1

1

HTML:

<head>
   <link id="theme" rel="stylesheet" href="red.css">
</head>

TS:

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class MyClass {
    constructor (@Inject(DOCUMENT) private document) { }

    ngOnInit() {
      //here you can check for the users and then chnage depending upon the user
      this.document.getElementById('theme').setAttribute('href', 'blue.css');
    }
}
Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • is direct dom manipulation from a component not recommended? (may not possible to avoid i guess?) – 72GM Jun 01 '17 at 12:31
  • Direct DOM manipulation should be avoided entirely in Angular2. use bindings instead ref - https://stackoverflow.com/questions/37376442/where-does-dom-manipulation-belong-in-angular-2 – Rahul Singh Jun 01 '17 at 12:32
  • strange that you should give me a direct dom manipulation answer no? changed your mind fairly quickly :) – 72GM Jun 01 '17 at 12:40
  • its should be avoided and if you are playing with it you should be cautious , and you cannot get hold of entire style sheets in bindings rather you can get hold of properties, if you want to change property wise that too is possible but a fairly long code base for the same – Rahul Singh Jun 01 '17 at 12:42