Using dynamic css in angular6 components

Question

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>

Yes. You can create an object to pass as an input, as use the object with ngStyle angular.io/api/common/NgStyle — user184994
– user184994, Commented Jul 24, 2018 at 19:35

Immad Hamid · Accepted Answer · 2018-07-25 17:26:30Z

1

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;
}

edited Jul 25, 2018 at 17:26

answered Jul 24, 2018 at 19:46

Immad Hamid

7992 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user184994 Over a year ago

As far as I'm aware, this wouldn't work because of view encapsulation

Immad Hamid Over a year ago

Isn't he looking for something like this: stackblitz.com/edit/angular-d2m7mk or I didn't understand anything?

user184994 Over a year ago

Sorry, I missed that you were adding it to style.css (which doesn't feature ViewEncapsulation) as opposed to the component's own CSS file

Immad Hamid Over a year ago

NP. This is why I made a stackbliz demo... because if the answer's not correct then it shouldn't be here and I would have deleted it.

Collectives™ on Stack Overflow

Using dynamic css in angular6 components

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related