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

Question

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:

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? — Yogi Bear
– Yogi Bear, Commented Oct 24, 2017 at 13:05

Martin Adámek · Accepted Answer · 2017-10-24 13:05:17Z

3

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.

answered Oct 24, 2017 at 13:05

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yogi Bear Over a year ago

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?

Martin Adámek Over a year ago

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

Pytth Over a year ago

Dear god! Why was this simple answer so freaking hard to fine! Jeeesk!

Gabriele Petrioli · Accepted Answer · 2017-10-24 13:08:54Z

2

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

answered Oct 24, 2017 at 13:08

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

Yogi Bear Over a year ago

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.

Sanjay Tiwari Over a year ago

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>

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related