Safe HTML Pipe

ng g p safe-html --skip-import

Pipe

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

@Pipe({
  name: 'safeHtml',
  standalone: true,
})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private readonly sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

Component

<div [innerHTML]="htmlString | safeHtml"></div>

import { Component } from '@angular/core';
import { SafeHtmlPipe } from 'src/app/pipes/safe-html.pipe';

@Component({
  standalone: true,
  imports: [SafeHtmlPipe],
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styleUrls: ['./pipe.component.scss'],
})
export class PipeComponent {
  htmlString = `<h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed tempus mauris a massa blandit, id vehicula nibh lobortis</p>`;
}