Angular 5 add dynamic html file into DIV

Question

I am very new to Angular, I am trying to insert the html file as my string and insert into DIV element

I have my search.component.html called

<div #ID></div>

components.ts

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

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {
  constructor() {}

  let ServerResponseHtml = '<div><input type="text"/><input type="text"/><span class="btn btn-outline-primary btn-sm" (click)="open(content)">View Document</span></div>';

  document.getElementById("DIV").innerHTML = ServerResponseHtml;
}

I am getting the response from server as complete html markup, Just I need to append into my DOM and display the content, the markup can have inline styles also.

I tried for <div [innerHTML]="ServerResponseHtml"></div> and <div innerHTML="{{ServerResponseHtml}}"></div> but this is not displaying as html it is displayed as text.

I think you're not doing this the right way on a global scale. You should write your resulting div in the template with dynamic variables and maybe a condition for display. — Adrien Brunelat
– Adrien Brunelat, Commented Jan 19, 2018 at 10:37
Wait, you just want to insert the content of an .html file from the server to your client? — Adrien Brunelat
– Adrien Brunelat, Commented Jan 19, 2018 at 10:48
Yes, I want to insert the child elements, as Text format we can use variable {{dynamic}}. I need to render those in my page. — Umesha D
– Umesha D, Commented Jan 19, 2018 at 11:44
@swarooppallapothu will this work for (click) events as asked in the original question? — Pranjal Successena
– Pranjal Successena, Commented Apr 6, 2021 at 14:39

chaixdev · Accepted Answer · 2020-10-22 11:14:03Z

8

We need to use the safehtml for displaying the html.

We need to create the Pipe for this. safe-html-pipe.ts

    import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
    import {Pipe, PipeTransform} from '@angular/core';
    
    @Pipe({name: 'safehtml'})
    
    export class SafeHtmlPipe implements PipeTransform {
      constructor(private sanitized: DomSanitizer) {
      }
    
      transform(value): SafeHtml {
        return this.sanitized.bypassSecurityTrustHtml(value);
      }
    }

component.ts We need to import the pipe

import {Component, NgModule, Pipe, PipeTransform} from '@angular/core'

import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser'
import { SafeHtmlPipe } from './safe-html-pipe';
@Component({
selector: 'app-root',
template: 
    `<div [innerHtml]="safeHtmlContent | safehtml">
 </div>"})`
 
export class AppComponent {
 name:string;
  safeHtmlContent : string;
  constructor() {
    this.name = 'Angular2'
    this.safeHtmlContent  = '<html><head><title>Hello safe</title></head><body><h1>hello world Hello Umesh</h1></body></html>';
  }
}

Hope this helps :).

edited Oct 22, 2020 at 11:14

chaixdev

1222 silver badges10 bronze badges

answered Jan 22, 2018 at 8:28

Umesha D

8601 gold badge7 silver badges15 bronze badges

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

1 Comment

Pranjal Successena Over a year ago

Will [innerHtml] process (click) also? as asked in the original question. I doubt. Why is this an accepted answer?

Collectives™ on Stack Overflow

Angular 5 add dynamic html file into DIV

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related