You might have a situation where you need to display\/bind HTML code into some DOM elements.<\/p>\n\n\n\n
Usually, there\u2019s no problem in that binding, except that Angular will remove all the attributes from your HTML tags, and display them as simple string. <\/span><\/p>\n\n\n\n One solution to this is to create a Pipe and use it whenever you need the HTML to be as is (not filtered, not sanitized).<\/p>\n\n\n\n 1 .<\/span><\/strong> First create new file to hold the pipe the pipe ts.file will be filled like this : <\/p>\n\n\n\n 2.<\/span><\/strong> An import statement should be added (trough ‘ng generate’ function) in your 3. <\/span><\/strong> Finally use that pipe in your template:<\/p>\n\n\n\n You are done !<\/p>\n\n\n\n <\/p>\n\n\n\npipes\/keep-html.pipe.ts<\/code>:<\/p>\n\n\n\nng g pipe <name> <\/code><\/pre>\n\n\n\nimport { Pipe, PipeTransform } from '@angular\/core';\nimport { DomSanitizer } from '@angular\/platform-browser';\n\n@Pipe({ name: 'safeHtml', pure: false })\nexport class SafeHtmlPipe implements PipeTransform {\n constructor(private sanitizer: DomSanitizer) {\n }\n\n transform(content) {\n return this.sanitizer.bypassSecurityTrustHtml(content);\n }\n}<\/code><\/pre>\n\n\n\napp.module.ts<\/strong><\/code>. If not, you have to do it yourself. <\/p>\n\n\n\nimport { SafeHtmlPipe } from '.\/pipes\/safe-html.pipe';\n@NgModule({\n declarations: [\n SafeHtmlPipe\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}<\/code><\/pre>\n\n\n\n<div [innerHTML]=\"htmlContent | safeHtml\"><\/div><\/code><\/pre>\n\n\n\nReference:<\/h5>\n\n\n\n