How to append CSS from a variable in CSS or HTML file? Angular 4+

Question

Is that possible to append CSS from a variable. for example

var myHtml = "<div>My example html</div>";

// in html i can do this

<div [innerHTML]="myHtml"></div>

But what if I have CSS stored in variable. like below:-

var myCss = ".exampleClass {margin: 0;width: 100%;}";

How can I add this css variable in my CSS file OR in HTML as a working css?

I'm using Angular 4+ but even JavaScript solution also appreciated.

Sebastian Speitel · Accepted Answer · 2018-04-02 06:45:12Z

5

You can simply insert a new <style> tag into your page using JavaScript:

var myCss = ".exampleClass {margin: 0;width: 100%;color:blue}";

var style = document.createElement("STYLE");
style.innerText = myCss;
document.body.appendChild(style);

<div class="exampleClass">Lorem ipsum</div>

edited Apr 2, 2018 at 6:45

answered Apr 1, 2018 at 10:31

Sebastian Speitel

7,3772 gold badges21 silver badges38 bronze badges

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

Comments

Srikanth Sharma · Accepted Answer · 2018-04-01 17:25:18Z

1

Try: <div [style.width.%]="WidthValue" [style.marginTop.px]="marginTopValue"></div>

where, in *.ts file, you are having value in a variable

WidthValue: number = 100;
marginTopValue: number = 0;

Adding one more way,

<div [ngStyle]="styleObject"></div>

where,

styleObject = {
  'width': '100px',
  'margin-top': '10px'
}

edited Apr 1, 2018 at 17:25

answered Apr 1, 2018 at 11:07

Srikanth Sharma

2,1473 gold badges21 silver badges27 bronze badges

1 Comment

RajnishCoder Over a year ago

can't because i have lots of CSS and css can be changed dynamically form backend.

Collectives™ on Stack Overflow

How to append CSS from a variable in CSS or HTML file? Angular 4+

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related