How to use string interpolation in style tag in Angular component?

Question

@Component({
  selector: 'app-style',
  template: `
    <style>
      .test {
        color: {{ textColor }}
      }
    </style>
  `
})
export class StyleComponent {
  textColor = "red";
}

This doesn't seem to be working and I need my styles to be dynamic and in some specific CSS class. Is there some other way I could do this?

score 10 · Answer 1 · answered Aug 22 '18 at 18:17

10

You can use ngStyle directive like this maybe;

@Component({
  selector: 'app-style',
  template: `
   <ul>
      <li [ngStyle]="{color: textColor}">List Item</li>
   </ul>
  `
})
export class StyleComponent {
  textColor = "red";
}

answered Aug 22 '18 at 18:17

Alperzkn

467
2
10
25

1

I believe you need the single quotes around `color` – Jnr Dec 18 '20 at 18:25

score 10 · Answer 2 · answered Aug 22 '18 at 22:26

10

When the component is renderd the style tag will move to head element of the page and any angular syntax inside this element will be ignored.

the only way I have found is to create the style element dynamic and provide the desire style.

app.component.ts

  textColor = 'red';
  constructor(private el: ElementRef) {

  }

  ngOnInit() {

    let style: string = `
     .test {color :${this.textColor}; }
    `;

    this.createStyle(style);

  }

  createStyle(style: string): void {
    const styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(style));
    this.el.nativeElement.appendChild(styleElement);
  }

app.template.html

<span class="test">test</span>

stackblitz demo

answered Aug 22 '18 at 22:26

Muhammed Albarmavi

23,240
8
66
91

I'd need a solution with an SCSS stylesheet to be able to override bootstrap variable with a component variable. Don't you accidentally know about something like that? – Frimlik May 20 '21 at 11:04
bootstrap variable are compiled before application execution. Angular templates & variables are compiled at execution time. So you won't be able to change/override a Bootstrap variable with Angular variable. – Nicolas Janel Mar 07 '23 at 05:05
Note that those styles will stay active in the app until app is closed (tab closed or refreshed). If you need to encapsulate the styles you create this way, don't forget to wrap your styles with a class/id to avoid that thoses styles are used all along the application. – Nicolas Janel Mar 07 '23 at 05:17

ibenjelloun · Answer 3 · 2018-05-05T13:11:27.737

3

You can access color style by [style.color] or specify a defined class in the style sheet [class] :

<div [style.color]="color">Style Test</div>
<div [class]="className">Class Test</div>

Here is a running example.

edited May 05 '18 at 13:11

answered May 05 '18 at 13:00

ibenjelloun

7,425
2
29
53

I am aware of that. My point is to make it global though. So ideally I would apply class and change its properties when "theme" changes, however that isn't possible (like in my example). Only thing that is coming to my mind is making directives that would change color dynamically and all settings would be in three or four directives. Currently I solved it using ngStyle, that's not really good approach for problem I am having. – S. Johnson May 05 '18 at 13:34

score 1 · Answer 4 · answered Aug 20 '18 at 12:10

I had faced the same problem. In my case the use had and xml where he was changing the color and on load of application i was calling and api to read xml and get JSON object. I had categorized all elements color like PrimaryForeground, PrimaryBackground, PrimaryHover, etc. Once i got the json object I was updating the values of this variables.

score 0 · Answer 5 · answered May 05 '18 at 15:21

If you want to load dynamically a css you can do "easy" At first attemp, (you have in assets folder "style1.css" and "style2.css") is only write in your app.component.html

<link rel="stylesheet" [href]='myStyle'>
...rest of tags...

//In your app.component.ts
myStyle="assets/style1.css"

But the problem is that your get an error "unsafe value used in a resource URL context", so you must use Domsatinizer. So

Your app.component like

<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(myStyle)'>
..rest of your div..

In your app.component.ts

import { DomSanitizer } from '@angular/platform-browser';

@Component({...})
export class appComponent{
   myStyle="assets/style1.css"
   constructor(public sanitizer: DomSanitizer) {}
}

How to use string interpolation in style tag in Angular component?

5 Answers5