title: Problem in converting unsafe to safe URL in Angular 8 using pipes
body: <p>I am new to Angular, and I am trying to convert my unsafe URL to a safe URL. I searched <a href="https://stackoverflow.com/questions/37432609/how-can-i-avoid-adding-prefix-unsafe-to-a-link-by-angular-2">here</a> to rectify this problem using pipe, but I don't see it converted to safe, may be something I am missing.</p>
  <p>My <em>pipe.ts</em> file looks as below:</p>
  <pre><code>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);
    }
  }
  </code></pre>
  <p>Part of my template looks as below:</p>
  <pre><code>&lt;tr *ngFor=&quot;let myData of data&quot;&gt; // Data is coming the from component.ts file
  
      &lt;td&gt; &lt;a href='my://problem/{{myData.Id}} | safeUrl'&gt;myLink&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>In the UI, when I inspect, it appears to be like <code>unsafe: my://problem/55316480 | safeUrl</code>. But I expect it to appear as <code>my://problem/55316480</code></p>
  <p>How can I fix it?</p>