Problem in converting unsafe to safe URL in Angular 8 using pipes

Question

I am new to Angular, and I am trying to convert my unsafe URL to a safe URL. I searched here to rectify this problem using pipe, but I don't see it converted to safe, may be something I am missing.

My pipe.ts file looks as below:

safe-url.pipe.ts

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(value: any, args?: any): any {
    return this.domSanitizer.bypassSecurityTrustHtml(value);
  }
}

Part of my template looks as below:

<tr *ngFor="let myData of data"> // Data is coming the from component.ts file

    <td> <a href='my://problem/{{myData.Id}} | safeUrl'>myLink</a></td>
</tr>

In the UI, when I inspect, it appears to be like unsafe: my://problem/55316480 | safeUrl. But I expect it to appear as my://problem/55316480

How can I fix it?

Answer 1

<tr *ngFor="let myData of data"> // data is coming from component.ts file

<td> <a href='my://problem/{{myData.Id}} | safeUrl'>myLink</a></td>

The issue is that 1) you are passing a string to href instead of an expression. 2) bypass the wrong property

Try

<td> <a [href]="('my://problem/' + myData.Id) | safeUrl">myLink</a></td>
    return this.domSanitizer.bypassSecurityTrustUrl(value);

Demo: https://stackblitz.com/edit/angular-pi4mn8