I have different CSS files(red.css,blue.css) in the single Angular Component.How can we import the css file according to the condition. If I mentioned the color as red the red.css file should be imported.
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
})red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: blue;
}<div class="my-container">
<h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1>
</div>Multiple CSS Files and condition that takes color as input and should apply the css file according to the given color.
CSS part:
.my-red-container{
height: 100%;
background-color: red;
}
.my-blue-container{
height: 100%;
background-color: blue;
}
Angular part: let's suppose that You have typescript var named color and Its value is 'blue' or 'red
<div
[ngClass]="{'my-red-container': color === 'red', 'my-blue-container' : color === 'blue' }"
></div>
CSS Part
.my-red-container{
height: 100%;
background-color: red;
}
.my-blue-container{
height: 100%;
background-color: blue;
}
Component.html Part
<div [ngClass]="{color === 'red' ? 'my-red-container' : 'my-blue-container'}">
</div>