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:

Answer 1

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:

  
    
  


  
Code Snippet
  

    
{{getFlatButtons()}}
  

And my modified component code:

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

constructor() {}

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