title: Display raw html - Angular 6
body: <p>I am looking to display the raw HTML code (example.component.html) below 'example works!'. The page should display the following:</p>
  
  <pre><code>example works!    
  &lt;p&gt;   
    example works!
  &lt;/p&gt;
  </code></pre>
  
  <p>I can find various resources showing how this can be done using AngularJS but not Angular 6. </p>
  
  <p>I have tried to use [innerHTML] but this didn't work.</p>
  
  <hr>
  
  <pre><code>&lt;p&gt;
    example works!
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>example.component.ts</strong></p>
  
  <pre><code>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() {
    }
  
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    &lt;rt-example&gt;&lt;/rt-example&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>OUTPUT</strong> . . <a href="https://i.stack.imgur.com/ZyR7A.jpg" rel="noreferrer">link to image</a></p>
  </blockquote>