CODEWITHSUNDEEP
angular
Wagner Danda da Silva Filho
Wagner Danda da Silva Filho

Reputation: 5407

Displaying escaped HTML in angular

I'm looking for a simplified way to display escaped html code in the browser. I.e. this is for a "quick start / lib demo" page.

So I want to display this line as it is (without angular intercepting and calling the component):

<wd-input [label]="'this is a label'"></wd-input>

I tried a something like:

{{ '<wd-input [label]="'this is a label'"></wd-input>' }}

But it didn't work, Angular still compiled and rendered it.

Edit: to provide more context, this is what I'm going to have to do unless we find a better way (i.e. manually escaping the html directly in the template):

&lt;wd-input [label]="'this is a label'"&gt;&lt;/wd-input;

Upvotes: 4

Views: 21515

Answers (3)

Sourav Dutta
Sourav Dutta

Reputation: 1332

CHECK WORKING STACKBLITZ

2 approaches i'm doing in here

1. To escape double curly braces {{}} I've used DomSanitizertobypassSecurityTrustHtml to show raw code and Replaced < with &lt; and > with &gt;

2. I used textarea readonly and some CSS styling to show raw html content.

Your component.ts can be something like below:~

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

import { DomSanitizer, SafeHtml } from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  templatehtml: string;
  html: SafeHtml;
  constructor(private sanitized: DomSanitizer) {

    this.templatehtml = `
      import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
      import { BrowserModule } from '@angular/platform-browser'
      import { FormsModule } from '@angular/forms';

      @Component({
      selector: 'my-app',
      template: '&lt;span&gt;{{name}}&lt;/span&gt;'
      })

      export class AppComponent {
        name = "Angular";
      }  
    `;


    this.html = this.sanitized.bypassSecurityTrustHtml(this.templatehtml);
  }
}

Your component.html can be something like below:~

<div class="container">
  <b>Your raw component looks something like</b> 
  <pre [innerHtml]="html"></pre>

  <b>Your raw html looks something like</b> 
  <textarea readonly>
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <wd-input [label]="'this is a label'"></wd-input>
        <p class="card-text">Some quick example</p>
        <a href="#" class="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  </textarea>

  <b>This is the rendered html</b> 
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example</p>
      <a href="#" class="btn btn-primary">
        Go somewhere
      </a>
    </div>
  </div>
</div>

and text area CSS like

textarea {
  border: none;
  outline: none;
  width: 100%;
  height: 50vh;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none; /*remove the resize handle on the bottom right*/
}

Hope this is helpful!

Upvotes: 1

Keith James
Keith James

Reputation: 167

You could try storing the html string in a variable and presenting that on the page. 

@Component({
selector: 'my-app',
template: `    
<div> {{htmlString }}</div>
`
})

export class AppComponent  {

htmlString = `<wd-input [label]="'this is a label'"></wd-input>`;
  constructor() {}  
}

UPDATE I created a wrapper component that takes the first element and stores it as a string then presents it using ng-content. Take a look. You can use this https://stackblitz.com/edit/quick-html-wrapper

Upvotes: 1

Alexander Gasnikov
Alexander Gasnikov

Reputation: 41

You can't get around escaping quotes if you want to keep HTML within the template. Maybe the closest solution possible:

<span [innerText]="'<wd-input [label]=&quot;\'this is a label\'&quot;></wd-input>'"></span>

Upvotes: 1

Related Questions