Angular 5 How to insert a string as a HTML element

Question

I am getting response from server as string :

<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>

How can i insert this in my page directly as a html element so that i can view a html table to users.

I am new to angular below is thing which i have tried :

i have created a variable in my componenet class as htmltable and tried to create a htmlelemnt like below

this.htmltable = document.createElement(serverresponse.htmltable)

but its not working .

also i have tried this way :

 <div class="dynamically_created_div unique_identifier" #d1></div>
    @ViewChild('d1') d1:ElementRef;
        this.renderer.appendChild(this.d1, serverresponse.htmltable);

but its not working. Please suggest me the correct way of doing this

Possible duplicate of [TypeScript - Append HTML to container element in Angular 2](https://stackoverflow.com/questions/39126299/typescript-append-html-to-container-element-in-angular-2) — Deep 3015, Apr 14 '18 at 15:13

score 21 · Answer 1 · answered Apr 14 '18 at 14:23

21

You need to sanitize your html before displaying it in the template.

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

@Component({
  selector: 'my-app',
  template: `
  <div [innerHtml]="safeHtml"></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(
      '<button>Click me</button>'
    )
  }
}

Live demo

answered Apr 14 '18 at 14:23

Tomasz Kula

16,199
2
68
79

This is the right solution, works with all HTML elements, style tag included, very useful for injecting elements – CREM Jun 14 '18 at 15:43
"Calling any of the bypassSecurityTrust... APIs disables Angular's built-in sanitization" , "WARNING: calling this method with untrusted user data exposes your application to XSS security risks!" src: https://angular.io/api/platform-browser/DomSanitizer. – Dm Mh Dec 24 '21 at 14:19

score 11 · Answer 2 · answered Apr 14 '18 at 14:19

11

You can use innerHtml directive.

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

In Component class

theHtmlString=  '<table><thead><tr> <th scope="col">Home</th> <th scope="col">Page </th> <th scope="col">World </th> <th scope="col">HE </th> <th scope="col">MAN</th> <th scope="col">GO</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>1</td><td>145</td><td>42</td></tr><tr><td>12</td><td>3125</td><td>315</td><td>2554</td><td>5542</td><td>331255</td></tr></tbody></table>';

answered Apr 14 '18 at 14:19

ranjeet8082

2,269
1
18
25

2

This will not work. Angular sanitizes all the innerHtml set this way. – Tomasz Kula Apr 14 '18 at 14:22
2

@TomaszKula - It should work. What you say is true for interpolation but not when binding `innerHTML`. See [this stackblitz](https://stackblitz.com/edit/template-driven-form-2-svgxka). – ConnorsFan Apr 14 '18 at 14:34
This behavior is removed in later versions of angular. In angular 13 by default angular sanitizes any text that is to be rendered using HTML – Pavan Feb 14 '23 at 16:43

score 1 · Accepted Answer · answered Jul 06 '22 at 21:58

You can create custom angular pipe as follows:

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

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

in HTML component,

 <div [innerHTML]="comments | safeHtml"></div>

Angular 5 How to insert a string as a HTML element

3 Answers3

Linked