CODEWITHSUNDEEP
cssangularcomponentsmodularity
Rodrigo Espinoza
Rodrigo Espinoza

Reputation: 379

Using dynamic css in angular6 components

I'm using two different components A: sea.component.ts and B:sun.component.ts both call a child component in these child I have to load a different css if is called by sea or sun component. Is possible to pass css url as an input in child component as:

 <sun_parent>
     <child [css]="sun_css"></child>
 </parent>

 <sea_parent>
     <child [css]="sun_css"></child>
 </sea_parent>

Upvotes: 0

Views: 104

Answers (1)

Immad Hamid
Immad Hamid

Reputation: 789

There could be a way maybe but here's a suggestion: Both of your component calls the same child component, so you can take advantage of it by using an id on the parent div, like this:

Here's an example:

https://stackblitz.com/edit/reuseable-component

<parent id="iAmSeaParent">
    <child></child>
</parent>

<parent id="iAmSunParent">
    <child></child>
</parent>

In your style.css

#iAmSeaParent childClassOrIdOrTag {
    background: yellow;
}

#iAmSunParent childClassOrIdOrTag {
    background: yellow;
}

Upvotes: 1

Related Questions