Ticker

6/recent/ticker-posts

How to sanitizing HTML with pipe

How to sanitizing HTML with pipe function in angular


Introduction:

We can easily sanitize your HTML in angular. we should develop custom pipe.ts for sanitize HTML so we can use any places from project using pipe operator.

Let's play with it!

Setup:

We are going to keep it simple with the following module and routing configuration. Let's start the import process with pipe.ts built in.

On my setup I have created shared.module.ts. Any common files (like sanitized-html.pipe.ts) that I want to use globally in my project are added to the shared.module.ts.

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SanitizedHtmlPipe } from './sanitized-html.pipe';
@NgModule({
  declarations: [
    SanitizedHtmlPipe
  ],
  imports: [
    CommonModule
  ],
  exports: [
    SanitizedHtmlPipe
  ]
})
export class SharedModule { }

// hero.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from 'src/app/shared/shared.module';
import { HeroComponent } from './hero.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [HeroComponent],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild([
      {path: '', component: HeroComponent}
    ])
  ]
})
export class HeroModule { }

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'hero',
    loadChildren: () => import('./page/hero/hero.module').then(m => m.HeroModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// sanitized-html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
  name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: any): any {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

// hero.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
  jsonArticles: any = {
    "articles": [
      {
        "id": 1,
        "title": "<h1><a href='https://kmgtech.blogspot.com/'>
Welcome to KK Nebula World!</a></h1>"
      },
      {
        "id": 2,
        "title": "<h2><a
        href='https://kmgtech.blogspot.com/2021/10/how-to-get-route-url-in-angular.html'>
        How to get route URL in Angular?</a></h1>"
      },
      {
        "id": 3,
        "title": "<h2><a
        href='https://kmgtech.blogspot.com/2021/10/angular-html-binding.html'>
        How to bind HTML into Angular?</a></h1>"
      }
    ]
  };
  constructor() { }
  ngOnInit(): void {
  }
}

// hero.component.html
<table>
  <tr *ngFor="let data of jsonArticles?.articles">
    <td>{{data?.id}}</td>
    <td>
      <div [innerHTML]="data?.title | sanitizedHtml"></div>
    </td>
  </tr>
</table>

Directory Structure:

.
├── page
│ ├── hero
│ │ ├── hero.component.html
│ │ ├── hero.component.css
│ │ ├── hero.component.ts
│ ├── header
│ │ ├── ...
│ └── footer
│   ├── ...
├── shared
│ ├── sanitized-html.pipe.ts
│ └── shared.module.ts
└── app.module.ts