not - ng-bind-html angular 5

Cómo agregar dinámicamente innerHTML con componentes angulares 2

Question

Estoy creando documentos para una biblioteca de componentes. Quiero 1 cadena de html que genere tanto el componente en la página como los documentos para ello.

Lo que quiero:

Lo que tengo:

Cuando inspecciono el HTML, las etiquetas de mi botón no están presentes. Están siendo eliminados cuando uso innerHTML.

Mi código de componente:

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)
}

Mi plantilla HTML:

<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

Aceptaré la respuesta de Gunter ya que responde mi pregunta.

Para aquellos interesados, la forma en que resolví mi problema fue creando un componente y exigiéndolo.

Creé un componente tonto:

import {Component} from ''@angular/core'';
@Component({
selector: ''flat-buttons'',
template: require(''./flatButtons.html''),
})
export class FlatButtons {
constructor() {
}
}

Y luego mi plantilla html modificada:

<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>

Y mi código de componente modificado:

private flatButtons = require(''./components/flatButtons/flatButtons.html'')
constructor() {}
getFlatButtons() {
return html_beautify(this.flatButtons, this.options)
}

Answer 2

Angular no procesa el HTML agregado dinámicamente, solo lo agrega textualmente, excepto alguna desinfección para evitar problemas de seguridad. Consulte En RC.1, algunos estilos no se pueden agregar utilizando la sintaxis de enlace para saber cómo evitar que el desinfectante elimine el HTML.

Puede usar ViewContainerRef.createComponent() como se muestra en las pestañas dinámicas Angular 2 con componentes elegidos con clic del usuario para agregar componentes dinámicamente.

También hay soluciones disponibles para crear componentes dinámicamente como se muestra en Equivalente de $ compilar en Angular 2