How To Display Dynamic HTML Without Sanitizing Or Filtering Using Pipe

Posted By : Shilpa Adlakha | 28-May-2018

To display dynamic HTML in angular 5 we use the pipe to sanitize data. As Angular 2+ will remove all the attributes from the HTML tags.for this we need to create a Pipe and use it whenever we need the HTML to be as it is. When the value is inserted into the document object model from a template with the help of any of the property,attributes,styles, class binding or any interpolation. Angular sanitizes and escapes untrusted values. Sanitization process modifies the input field, returns it to a value that would be safe to insert into the document object model.


Step 1: To create a pipe we Create new file to hold the pipe pipes/sanitize-html.pipe.ts:


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

@Pipe({ name: 'sainitizeHtml', pure: false })
export class sanitizeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);


Step 2: Now Add an import statement in your app.module.ts and add this it in declaration array.


import { sanitizeHtmlPipe } from './pipes/sanitize-html.pipe';

  declarations: [
  bootstrap: [AppComponent]
export class AppModule {


Step 3:Now we can use the pipe in our template:


<div [innerHTML]="post.body | SafeHtml"></div>


Following above steps we create pipe to show dynamic html as it is.


DOM sainitizer helps in allowing values to be safe


abstract class DomSanitizer implements Sanitizer {
  abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
  abstract bypassSecurityTrustHtml(value: string): SafeHtml
  abstract bypassSecurityTrustStyle(value: string): SafeStyle
  abstract bypassSecurityTrustScript(value: string): SafeScript
  abstract bypassSecurityTrustUrl(value: string): SafeUrl
  abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl


Methods used above are:


sanitize() :It sanitizes a value for use in the given SecurityContext.
abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null

If the given value is trustfull then it will render the data directly to be used in DOM.

abstract bypassSecurityTrustHtml(value: string): SafeHtml


SafeHtml,SafeStyle,SafeScript and SafeUrl:

All the above shows a warning in which is written as that the method with untrusted user data exposes the application to security issues.


bypassSecurityTrustStyle() :
It bypasses the security and trust of the given value to be safe style value.


bypassSecurityTrustScript() :
It bypasses the security and trusts the given value to be safe JavaScript.


bypassSecurityTrustUrl() :

It bypasses the security and trusts the given value to be a safe resource URL







About Author

Author Image
Shilpa Adlakha

Shilpa is a bright Wordpress Developer, she has good knowledge of HTML, CSS, PHP and Wordpress.

Request for Proposal

Name is required

Comment is required

Sending message..