Dynamic component selection and styling in Angular 2

Question

I have an Angular application which loads a configuration .json file. Essentially what I am trying to do is dynamically select components and add inline styles to the element.

config is given below as an example of the config structure fetched from a http request.

For example;

var config = [
  {
    name: "header-component",
    styles: "margin:0;padding:0;background:black"
  }
]

<div *ngFor="let conf of config">
  <{{conf.name}} style="{{conf.styles}}"></{{conf.name}}>
</div>

Any idea's on getting this to work or an alternative approach?

Sachila Ranawaka · Accepted Answer · 2017-07-14T12:38:07.947

1

angular don't bind var variables to dom. Use it like this

config :{ name: string, styles: string }[]= [
  {
    name: "header-component",
    styles: "margin:0;padding:0;background:black"
  }
]

updated

you can create a @pipe and bind the html. modify the json like this.

config :{ name: string, styles: string, html : string }[]= [
      {
        name: "header-component",
        styles: "margin:0;padding:0;background:black",
        html : "<{{conf.name}} ngStyle='[conf.styles]'></{{conf.name}}>"
      }
]

add this pipe to your code

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustHtml(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

call the pipe in the html

<div *ngFor="let conf of config">
  <div [innerHTML]="conf.html | safeHtml"></div>
</div>

edited Jul 14 '17 at 12:38

answered Jul 14 '17 at 11:59

Sachila Ranawaka

39,756
7
56
80

Sorry, config is just an example of what is fetched from a http request. What's happening with the above is an error "Template parse error, unexpected closing tag '{{conf.name}}'" – stackunderflow Jul 14 '17 at 12:13
you cant bind the element like this. you have to compile the dom again – Sachila Ranawaka Jul 14 '17 at 12:20
Damn, how? You got an example? :-) – stackunderflow Jul 14 '17 at 12:25
using `innerHTML` check this https://stackoverflow.com/questions/31548311/angular-2-html-binding – Sachila Ranawaka Jul 14 '17 at 12:31
Thanks, now I have WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). – stackunderflow Jul 14 '17 at 12:40

Dynamic component selection and styling in Angular 2

1 Answers1