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);
}
}
Getting Started:
- 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://kknebulatech.blogspot.com/'>
Welcome to KK Nebula World!</a></h1>"
},
{
"id": 2,
"title": "<h2><a href='https://kknebulatech.blogspot.com/2021/07/how-to-get-full-url-for-route-in-angular.html'>
How to get route URL in Angular?</a></h1>"
},
{
"id": 3,
"title": "<h2><a href='https://kknebulatech.blogspot.com/2021/07/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
Output:
0 Comments