Displaying escaped HTML in angular

Question

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):

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

Answer 1

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>

Answer 2

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