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?
<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);