How to remove localhost:4200 url appending in [href] attribute in <a> tag in angular

Question

Below is the HTML:

 <a [href]= "message.messagelinkHere ? sanitize(message.messagelinkHere) : message.messagelink"

in ts file

 import { DomSanitizer } from '@angular/platform-browser';

constructor(public sanitizer:DomSanitizer) { }
 sanitize(url:string) {
  let sanitizedUrl;
  sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url)
  console.log(sanitizedUrl) //SafeValue must use [property]=binding:/(https://urldefense.proofpoint.com/v2/url?u=https-3A__nam11.safelinks)
  return sanitizedUrl;
 }

trying to hit the URL it gets appended with http://localhost:4200/https://urldefense.proofpoint.com/v2/url?u=https-3A__nam11.safelinks and link is opening the local application, instead of external site.

Can you please let me know how can i remove localhost that is appended in href

Answer 1

Here is the solution I did not use Dom sanitizer instead I directly kept URL using string interpolation to tag.

https://stackblitz.com/edit/angular-ivy-xe5gzz?file=src%2Fapp%2Fapp.component.html