javascript - ¿Cómo puedo convertir cadenas de HTML en HTML en mi plantilla (Angular2/TypeScript)?

Tengo este objeto en un archivo dummy-data.ts. A través de un servicio lo obtengo con éxito en app.component.ts.

{name:"Object1", 
    prop1: {key:'value', key:'value'},
    password: "P@ssword1",
    htmlText:'<h4>This is THE demo text</h4><p>I want it to display as HTML</p>'
}

Actualmente app.component.ts se ve así, para empezar de manera simple:

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
        <p *ngFor="#plot of plots">
            {{plot.personalPanelText.transition}}
        </p>
`,
providers: [PlotService]  
})

El resultado final son cadenas en lugar de HTML. Quiero que el HTML sea código, no texto con etiquetas HTML.

He intentado un par de formas y he explorado en la red mundial y la documentación de Angular2, pero no pude encontrar una solución.

¡Gracias de antemano!

Respuesta #1

Puedes enlazar a innerHtml así:

<div [innerHtml]="someProp.htmlText"></div>

Angular no instancia ningún componente cuyos selectores coincidan con etiquetas o atributos en HTML añadidos de esta manera, ni resolverá ningún enlace (como {{xx}})

Vea también Cómo enlazar HTML sin procesar en Angular2