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 — Deep 3015
– Deep 3015, Commented Apr 14, 2018 at 15:13

Tomasz Kula · Accepted Answer · 2018-04-14 14:23:35Z

22

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, 2018 at 14:23

Tomasz Kula

16.9k3 gold badges71 silver badges82 bronze badges

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

2 Comments

CREM Over a year ago

This is the right solution, works with all HTML elements, style tag included, very useful for injecting elements

Dm Mh Over a year ago

"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: angular.io/api/platform-browser/DomSanitizer.

ranjeet8082 · Accepted Answer · 2018-04-14 14:19:46Z

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, 2018 at 14:19

ranjeet8082

2,3791 gold badge21 silver badges26 bronze badges

3 Comments

Tomasz Kula Over a year ago

This will not work. Angular sanitizes all the innerHtml set this way.

Martin Parenteau Over a year ago

@TomaszKula - It should work. What you say is true for interpolation but not when binding innerHTML. See this stackblitz.

Pavan Over a year ago

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

RameshD · Accepted Answer · 2022-07-06 21:58:51Z

1

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>

answered Jul 6, 2022 at 21:58

RameshD

9827 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angular 5 How to insert a string as a HTML element

3 Answers 3

2 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Linked

Related