How to dynamically add innerHTML with angular 2 components

collinglass picture collinglass · Nov 7, 2016 · Viewed 32.4k times · Source

I'm creating docs for a component library. I want 1 string of html that generates both the component on the page and the docs for it.

What I want:

enter image description here

What I have:

enter image description here

When I inspect the HTML, my-button tags are not present. They are being stripped out when I use innerHTML.

My component code:

private flatButtons = `<div class="button-wrapper">
      <my-button [type]="'default'" [raised]="false">Default</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'primary'" [raised]="false">Primary</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'success'" [raised]="false">Success</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'info'" [raised]="false">Info</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'warning'" [raised]="false">Warning</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'danger'" [raised]="false">Danger</my-button>
    </div>`

constructor() {}

getCode() {
    return html_beautify(this.flatButtons, this.options)
}

My HTML template:

<div class="row">
<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <div id="flatButtons" [innerHTML]="getCode()">
    </div>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <pre>{{getCode()}}</pre>
</div>

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Nov 7, 2016

Angular doesn't process HTML added dynamically, it just adds it verbatim except some sanitization to prevent security issues. See In RC.1 some styles can't be added using binding syntax for how to prevent the sanitizer of stripping the HTML.

You can use ViewContainerRef.createComponent() like shown in Angular 2 dynamic tabs with user-click chosen components to add components dynamically.

There are also solutions available how to create components dynamically like shown in Equivalent of $compile in Angular 2