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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Multiple CSS Files and condition that takes color as input and should apply the css file according to the given color.

CodePudding user response：

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>