How to dynamically add innerHTML with angular 2 components

Question

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:

What I have:

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 1

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

Answer 2

I'll accept Gunter's answer since it answers my question.

For those who are interested, the way I solved my problem was by creating a component and requiring it.

I created a dumb component:

import {Component} from '@angular/core';


@Component({
  selector: 'flat-buttons',
  template: require('./flatButtons.html'),
})
export class FlatButtons {

  constructor() {
  }
}

And then my modified html template:

<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <flat-buttons></flat-buttons>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <h3>Code Snippet</h3>
  <div class="well">
    <pre>{{getFlatButtons()}}</pre>
  </div>
</div>

And my modified component code:

private flatButtons = require('./components/flatButtons/flatButtons.html')

constructor() {}

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