Conditionally import CSS files in to Angular component

Question

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.

Answer 1

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>

Answer 2

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>