Angular 14: Attempting to use DomSanitized to avoid angular default sanitization causing errors

Question

I am attempting to leverage DomSanitized to avoid the default Angular sanitization like in this answer: https://stackoverflow.com/a/39630507/14108804

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


@Pipe({ name: 'safeHtml'})
export class PageLoaderComponent implements PipeTransform {

    pageHtml: string;

    constructor(private sanitized: DomSanitizer) {}

    transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
   }

HTML side:

<div (click)="pageClicked($event)" class="page-loader-wrap">
  <!--       [innerHTML]="pageHtml">-->
  <div class="page-loader-slot center-width narrow" [innerHTML]="pageHtml | safeHtml">

  </div>
</div>

However I get an error on the html page on safeHtml:

unresolved pipe: safeHtml

and an error on my class:

PageLoaderComponent is not declared in any Angular module

What is causing this and how do I resolve this issue?

score 1 · Accepted Answer · answered Jun 26 '23 at 19:43

You created a Pipe (which name is poorly chosen btw, you should rename it SafeHtmlPipe to show that it is a pipe).

As it is not declared standalone, you must have declared it in a module. You have to import this module in the module where you are using it.

I found this Stackblitz (not mine) that does exactly what you need. Don't hesitate to take inspiration on this

Angular 14: Attempting to use DomSanitized to avoid angular default sanitization causing errors

1 Answers1