How to dynamically add styles to Angular 2 component

Question

How could I add something like this:

<style>
    {{customStyles()}}
</style>

Style tag is being cut off from template. It's initially unknown, which style will be applied to which element.

In Angular tutorial there is explained how to add styles to template, if template was defined as string in @Component decorator, but I found no information what to do if template is HTML file.

In Angular Create Style Tag in View Template? there is given a hack, not a framework tool, thus it does not answer the question.

There is absolutely no difference with the template being in another HTML file or as string . This part is not relevant to your question, IMO. — Pac0, Oct 12 '17 at 12:29
Have a look at : https://stackoverflow.com/questions/40676203/set-style-dynamically-in-angular2 — Pac0, Oct 12 '17 at 12:32
@Pac0 I need to make it with `style` tag, not styling particular tags — Maxim, Oct 12 '17 at 12:34
Your second link has a solution using Angular Sanitizer this year, here: https://stackoverflow.com/a/54348516/1657465 — luiscla27, Oct 25 '19 at 22:56

score 0 · Answer 1 · answered Oct 25 '19 at 23:06

You can bypass Angular restriction by using a DomSanitizer:

@Component({
  template: `<div [innerHTML]="styles"></div>`
})
export class OutputStyleTagComponent implements OnInit {
  public styles: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    this.styles = this.sanitizer.bypassSecurityTrustHtml(`
      <style>
       .my-styles {
         ...
       }
      </style>
    `);
  }
}

This answer is an extract of this other question/answer, i've added it here because it took me some minutes to find it.

How to dynamically add styles to Angular 2 component

1 Answers1