Skip to content Skip to sidebar Skip to footer
Home / Angular / Html

Angular 5 Add Dynamic Html File Into Div

Post a Comment
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
component

Solution 1:

We need to use the safehtml for displaying the html.

  1. 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'})
    
    exportclassSafeHtmlPipeimplementsPipeTransform {
      constructor(private sanitized: DomSanitizer) {
      }
    
      transform(value): SafeHtml {
        returnthis.sanitized.bypassSecurityTrustHtml(value);
      }
    }
  1. 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>"})`exportclassAppComponent {
 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 :).

Post a Comment for "Angular 5 Add Dynamic Html File Into Div"