How to parse HTML from response in Angular?

Question

I do request to server and get JSON result:

{"result" => "HTML code"}

How to parse HTML code and get table from this response?

I tried to place this code to hidden block on the page:

<div #content>HTML code here from response</div>

What next? How to parse?

Possible duplicate of How to render string with html tags in Angular 4+? — nash11
– nash11, Commented Sep 18, 2019 at 19:41

Siddharth Pal · Accepted Answer · 2019-09-18 19:44:31Z

13

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'sanitizeHtml'})
export class SafeHtmlPipe implements PipeTransform {
   constructor(private sanitized: DomSanitizer) {
   }
   transform(value: string) {
     return this.sanitized.bypassSecurityTrustHtml(value);
   }
}

Usage:
<div [innerHTML]="content | sanitizeHtml"></div> //Content is what you got from json

We should always santize the content to prevent any malicious activity with DOMSanitizer. So for that We can create a pipe as above and use it anywhere in app.

answered Sep 18, 2019 at 19:44

Siddharth Pal

1,45811 silver badges24 bronze badges

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

2 Comments

Andrew Richesson Over a year ago

Aren't you bypassing the built-in sanitization here?

Woden Over a year ago

to sanitize the HTML, in Angular 15: this.sanitized.sanitize(SecurityContext.HTML, value)

Yogesh Waghmare · Accepted Answer · 2019-12-30 06:50:20Z

11

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  demo: string = `<div>
 <p>I am Yogesh</p>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
  </div>`
}

app.component.html

<div [innerHTML]="demo"></div>

answered Dec 30, 2019 at 6:50

Yogesh Waghmare

1,09513 silver badges10 bronze badges

2 Comments

Rip3rs Over a year ago

I would advise caution on using innerHTML as it can create memory leaks

Zorkind Over a year ago

@JosephBriggs can you say what is the alternative so it's a bit more useful? thanks.

Collectives™ on Stack Overflow

How to parse HTML from response in Angular?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related