loading themes based on user input in angular application - css

Question

I'm trying out an angular application where user can select themes from a dropdown and change the appearance of the application using this tutorial
I'm using :host-context
But the themes is not loading and i'm not sure what is wrong in it.
Below is the code
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div [ngClass]="theme">
<nav class="navbar fixed-top navbar-light justify-content-center headerColor">
<a class="navbar-brand" href="#">Socxo Themes</a>
</nav>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
title = 'app';
theme = "default";
setTheme(themeName:string)
{
this.theme=themeName;
}
}
I'm first trying to themes the navbar
below is the app.component.css
#import "./app.component.1.css";
#import "./app.component.2.css";
#import "./app.component.3.css";
.content{
margin-top:55px;
text-align: center;
}
.topClass{
margin-top:70px;
}
.headerColor{
border:1px solid;
}
In ./app.component.1,2,3.css i have added the css for themes as below
:host-context(.one).headerColor{
background-color: chocolate;
}
:host-context(.two).headerColor{
background-color: chocolate;
}
:host-context(.default).headerColor{
background-color: chocolate;
}
on selecting a option from select the theme variable value changes but the corresponding class doesn't load
Can anybody guide me..

Answer 1

Use of :host-context() is to apply styles to outside host elements. According to the documentation:
:host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root
In your case you are trying to apply a style to an element inside the same component. You can do this by doing the following,
Create a nav component and move your nav bar code to that.
Put your theme styles of nav component inside that component's style sheet
`#import "../app.component.1.css";
#import "../app.component.1.css";
#import "../app.component.2.css";`
Change your appComponent.html like following,
<div [ngClass]="theme">
<nav-comp></nav-comp>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
now your code will work with :host-context(), but remember the space after the function otherwise it won't work :host-context(.one) .headerColor. You don't have a space after your function in the above code.
If you only want to change the color of the nav bar by this, you can simply change all your theme style sheets like following,
.one .headerColor{
background-color: chocolate;
}
.two .headerColor{
background-color: chocolate;
}
.default .headerColor{
background-color: chocolate;
}

Answer 2

The solution to your problem is below:
Steps:
Add data member to the class:
classNames="default";
Add the host in the component decorator as below:
#Component({
//Here you need to add host after template property
host:{
'[class]' : 'classNames'
}
})
After that change your setTheme function to as below:
setTheme(themeName:string)
{
//here changing the host (classNames) dynamically
this.classNames=themeName;
this.theme=themeName;
}