Conditional css page in angular2

Question

When creating an angular component, how can make the css file conditional. ie., say for example, if I want style1.css when the user.type = 'A' and style2.css when user.type='B'. Is this possible?

https://stackoverflow.com/questions/19375695/angular-ng-style-with-a-conditional-expression — Aditya Mukherji, Aug 01 '17 at 05:54
@AdityaMukherji that is about angularjs, not related to angular2. — Val, Aug 01 '17 at 06:52

score 0 · Answer 1 · answered Aug 01 '17 at 07:20

0

You can do it with code that is like this:

main index.html

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

Then your component code would look like this

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

    switchTheme() {
      this.document.getElementById('theme').setAttribute('href', 'secondsheet.css');
    }
}

answered Aug 01 '17 at 07:20

Dean Chalk

20,076
6
59
90

Will this affect the whole DOM? or just the component's style? I was looking at something like. `@Component({ selector: 'app-items-list', templateUrl: './items-list.component.html', styleUrls: [ if (something) :'./items-list.component.css'?'./items-list.component2.css' ] })` – Upesh M Aug 02 '17 at 09:33
No, this solution only works for the whole DOM. Because of the way view encapsulation works at the component level, the CSS classes get renamed arbitrarily (to enable encapsulation) so there is no way to replace them programmatically – Dean Chalk Aug 02 '17 at 10:42

Conditional css page in angular2

1 Answers1