Mostrar HTML sin procesar - Angular 6

Estoy buscando mostrar el código HTML sin procesar (example.component.html) debajo de '¡ejemplo funciona!'. La página debería mostrar lo siguiente:

example works!    
<p>   
  example works!
</p>

Puedo encontrar varios recursos que muestran cómo se puede hacer esto usando AngularJS, pero no Angular 6.

He intentado usar [innerHTML] pero esto no funcionó.

<p>
  example works!
</p>

example.component.ts

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

@Component({
  selector: 'rt-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<div style="text-align:center">
  <rt-example></rt-example>
</div>

SALIDA . . enlace a la imagen

Respuesta #1

Puedes usar el ViewContainerRef para obtener el nativeElement y obtener su innerHTML.

Solo una advertencia: esto no será tu código HTML, sino el código compilado.

Aquí hay un ejemplo: stackblitz

export class AppComponent  {
  htmlContent: string;
  constructor(private view: ViewContainerRef) {
    setTimeout(() => this.htmlContent = (view.element.nativeElement as HTMLElement).innerHTML);
  }
}

EDITAR Si quieres el código no compilado, deberías usar esta notación: stackblitz

import { Component, ViewContainerRef } from '@angular/core';
import * as template from "./app.component.html";


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  htmlContent: string = template.default;
  constructor(private view: ViewContainerRef) {
  }
}

Pero sugiero que uses las versiones más recientes de TypeScript y Angular, ya que no estoy seguro de cuándo se introdujo.

Respuesta #2

Obtén una referencia que señale a ese componente usando ViewChild, como

export class AppComponent  {
  @ViewChild(ExampleComponent, { read: ElementRef }) exampleComponent;
}

Luego puedes acceder a su HTML con nativeElement.innerHTML.

Así que podrías cambiar tu app.component.html a esto:

<div style="text-align:center">
  <rt-example></rt-example>
</div>

{{exampleComponent.nativeElement.innerHTML}}