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?
2
-
stackoverflow.com/questions/19375695/…Aditya Mukherji– Aditya Mukherji2017-08-01 05:54:41 +00:00Commented Aug 1, 2017 at 5:54
-
@AdityaMukherji that is about angularjs, not related to angular2.Val– Val2017-08-01 06:52:49 +00:00Commented Aug 1, 2017 at 6:52
Add a comment
|
1 Answer
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');
}
}
2 Comments
Upesh M
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' ] })
Dean Chalk
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