Angular 4 Output Complete HTML Syntax code in HTML as raw text

Asked 24/10, 2017 at 12:46 Answered 24/10, 2017 at 13:8

I have scoured the possible answers and none of them work. All the innerHTML and PRE tag examples are fine with code or text, but NOT with HTML. Here is EXACTLY what I want to put into a variable:

<div [ngStyle]="{'display':'flex', 'flex-direction':'column', 'width': '100vw', 'height': '100vh'}">
  <top-header>
    <a class="topHeaderItem" (click)="goToHome()">Home</a>
    <a class="topHeaderItem" (click)="gotoTOC()">Contents</a>
  </top-header>

AND THAT is precisely what I want to show up on the screen - every single character because it is a tutorial example.

Here's my agony. My HTML:

1
<div [innerHTML]="code1">
</div>
<hr>
2
<div>
<pre>
  <code [innerHTML]="code1"></code>
</pre>
</div>
<hr>
3
<div [innerHTML]=code1>
</div>

My component.ts:

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

@Component({
  selector: 'cs-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  code1 = `
<div [ngStyle]="{'display':'flex', 'flex-direction':'column', 'width': '100vw', 'height': '100vh'}">
  <top-header>
    <a class="topHeaderItem" (click)="goToHome()">Home</a>
    <a class="topHeaderItem" (click)="gotoTOC()">Contents</a>
  </top-header>
  `

   constructor() {
  }
}

And now my pathetic output:

Perak answered 24/10, 2017 at 12:46 Comment(2)

<div>{{code1}}</div> ? – Cecrops 24/10, 2017 at 12:52

Hi Vega, That came amazingly close. ALL the HTML came out as raw text just like I asked for. Unfortunately, it all came out in one long line. It wouldn't kill me to produce div's for each line and maybe a little styling for indentations. Would like to propose this as the answer? – Perak 24/10, 2017 at 13:5

The innerHTML is if you want to actually show HTML that is inserted in the DOM as part of the document.

You want the normal {{ code1 }} syntax which will encode the variable for displaying.

Adding a code and a pre will style it the way you want (or you can do the same through CSS by setting the css of the container to have white-space:pre)

<div><code><pre>{{code1}}</pre></code></div>

example at https://plnkr.co/edit/cVnQZeWnqJCYTBmndmB6?p=preview

Deegan answered 24/10, 2017 at 13:8 Comment(2)

Out of all the combinations I tried, I did NOT try this one LOL... the pre inside the code and then {{ }} ... great. I have to write that down in my personal wiki. Thanks. – Perak 24/10, 2017 at 13:33

i have

<!DOCTYPE html>     <html>       <head>         <title>My First JavaScript Code</title>       </head>       <script type="text/javascript">           var myVar = 'global';           function checkscope() {             var myVar = 'local';             console.log(myVar);           }         </script>       <body onload="checkscope();">       <h2>JavaScript Comment</h2>       </body>     </html>

this is not working with <div><code><pre>{{code1}}</pre></code></div> – Shaunta 9/5, 2020 at 8:32

Binding with [innerHTML] will interpret the HTML. If you want to show the HTML code, you could use [innerText] instead, or simply use string interpolation as @Vega noted. That will properly escape the HTML.

<div>{{ code1 }}</div>

// or

<div [innerText]="code1"></div>

Binding to [innerText] will preserve the line breaks.

Tiffany answered 24/10, 2017 at 13:5 Comment(3)

I tried the second one before: see my #1 in my output shown above. I would very much like to preserve the line breaks though. Any more thoughts? – Perak 24/10, 2017 at 13:27

innerText will preserve those (convert them to <br>). But you could also use the first approach and handle this in HTML/CSS like @Gaby is suggesting (with <code><pre> markup or with white-space: pre CSS property on the <div>. – Glass 24/10, 2017 at 13:30

Dear god! Why was this simple answer so freaking hard to fine! Jeeesk! – Roughcast 3/4, 2020 at 0:5