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.

Answer 1

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.