Use variables to update internal CSS inside an angular component?

Question

I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.

This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.

Is it possible to have a value in the component TS like this:

myNewColour: "red"

That can then be used in an internal style sheet that's inside my angular component.html like this?:

<style>
  .myContainer { background: myNewColour }
</style>

<!-- HTML Content -->
<div class="myContainer"> Stuff </div>

Any help with this would be appreciated! :)

Yes you can use ngStyle or ngClass . Explained in my recent answer stackoverflow.com/questions/47402693/… — mohit uprim
– mohit uprim, Commented Nov 21, 2017 at 13:55
Thank @mohituprim - However, this needs to be a scenario where ideally the internal style (not inline style) is updated. I'll have a huge amount of data that will change look wise and cannot apply everything inline to the HTML element. — user8516249
– user8516249, Commented Nov 21, 2017 at 14:03

score 1 · Accepted Answer · 2017-11-21 14:07:42Z

1

"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so

<tag [ngStyle]="{'background': myNewColour}"></tag>

EDIT if it makes your code too long, what you can do is simply

let customStyle = {
  'background': this.myNewColour
};

And in your tag, simply

<tag [ngStyle]="customStyle"></tag>

edited Nov 21, 2017 at 14:07

answered Nov 21, 2017 at 14:02

user4676340

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

2 Comments

user8516249 Over a year ago

Thanks Trichetriche. Inline is styles applied to the HTML element. Internal is a style tag inside the component that encompasses all styles. That's primarily my question. Is it possible to dynamically update any values inside the style tag within the angular component. What you have suggested is what I'm already doing and it's proving quite difficult to maintain with the amount of elements I need to update :) Thanks for taking the time to respond though. Much appreciated.

user4676340 Over a year ago

If your problem is how to maintain the code that is too long, see my edit !

Collectives™ on Stack Overflow

Use variables to update internal CSS inside an angular component?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related