Conditionally import CSS files in to Angular component

user_13657034 0
Viewed 249

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.

angular css
2 Answers

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>
user_42245110

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>
user_176325360
Related