Search code examples
angulartypescriptangular-pipe

How do I make this a SafeUrl in Angular?

I created a Pipe

Looks like this

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

@Pipe({
  name: 'SafeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private domSanitizer: DomSanitizer) {}
  transform(url: any) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

When I use it in my HTML

<td><a [href]="'callto:{{item.email}}' | SafeUrlPipe">{{item.email}}</a></td>

I have added it to my app.module.ts and imported it on the ts (for the page) that I am using it.

I am using Angular 13

Solution

  • For your pipe to work, it must be placed inside the interpolation curly brackets:

    {{item.email | SafeUrlPipe }}