Adding CSS style url based on condition/input property Angular 2+

Question

I have a component and it has used in 2 places in application, one for listing and and another in slider, only difference is in CSS, one has larger view and another has smaller and some other CSS changes.

So I am thinking to use same component at both places and use different external style, but for that I need to add CSS url in to Component decorator dynamically.

Is this possible? If yes how?

Please so your code where component used and also share component — Hitesh Kansagara
– Hitesh Kansagara, Commented Apr 2, 2018 at 4:17
You could also have your component include all CSS, but only use the correct one depending on the context — David
– David, Commented Apr 2, 2018 at 6:39

Akanksha Gaur · Accepted Answer · 2018-04-02 04:59:59Z

0

I think you are looking for the directive ngStyle and ngClass

If you want to change a single css property, choose ngStyle like this:

<some-element [ngStyle]="{'font-size': styleExp}">...</some-element>

Your styleExp could be a conditional statement like

  isSmall ? 80% : 100%

If you want to apply a style class you need to use ngClass like this:

<some-element [ngClass]="{boolExp ? 'first' :'second'}">...</some-element>    
<some-element [ngClass]="{'first': boolExp }">...</some-element>

your boolExp has to return a boolean value. You can use different combinations for multiple classes.

Use the urls above for reference.

Here is another URL for learning purposes:

edited Apr 2, 2018 at 4:59

answered Apr 2, 2018 at 4:52

Akanksha Gaur

2,6963 gold badges29 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Adding CSS style url based on condition/input property Angular 2+

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related