Use variable in style tag in angular template?

Question

I am working on angular 5 application, and I have requirement of applying dynamic css in style tag in template. I have tried some solutions but they are not working.

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

When I inspect the custom_css class in browser then in style it shows

.custom_css{
   color: {{customCss.color}};
}

Any help is appreciated.

Its working on all other cases but doesn't work for css part. — Lakhvir Singh
– Lakhvir Singh, Commented Mar 23, 2018 at 12:49
I don't this Angular will allow you to have style in template. But it's easy to create dynamic element. — dfsq
– dfsq, Commented Mar 23, 2018 at 12:52

Roberto Zvjerković · Accepted Answer · 2018-03-23 12:57:05Z

16

You can use [ngStyle] directive:

<span [ngStyle]="{'color': 'red'}">
 This is angular 5 application
</span>

Or like so:

<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

And in component:

applyStyles() {
    const styles = {'color' : 'red'};
    return styles;
}

answered Mar 23, 2018 at 12:57

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

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

Comments

Humberd · Accepted Answer · 2019-07-19 10:04:09Z

10

By the way if you set the color like this:

<div [style.color]="color"></div>

where color='var(--cssValue)' it would not work!

However, this works correctly:

<div [ngStyle]="{color: color}"></div>

answered Jul 19, 2019 at 10:04

Humberd

2,9693 gold badges23 silver badges44 bronze badges

1 Comment

Simon_Weaver Over a year ago

You can however use var() like this <div [style.color]="'var(--poop)'">poop</div> where you've defined :host { --poop: brown; }. You wouldn't want to typically do this but that's how you could.

Thibaud Lacan · Accepted Answer · 2019-01-31 08:29:03Z

9

The given answer works if you have few elements to change in a given component, if you need to change the full overall look and feel of your app based on user's choice (and on the fly), the only way i found so far is to override css in the javascript like the following:

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});

answered Jan 31, 2019 at 8:29

Thibaud Lacan

3661 gold badge6 silver badges13 bronze badges

Comments

Paul · Accepted Answer · 2018-03-23 13:18:51Z

0

You can use [style.customClass]=“methodInComponent()”...

This will apply the class if the method in your component returns true.

answered Mar 23, 2018 at 13:18

Paul

4782 silver badges8 bronze badges

Collectives™ on Stack Overflow

Use variable in style tag in angular template?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related