Instead of adding a function to the JavaScript of each of your components to properly display HTML links, use an Angular2 pipe.
Create a pipe service called safe-url.pipe.ts
and add the following:
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) { return this.domSanitizer.bypassSecurityTrustResourceUrl(url); } }
Next, inject the pipe service in your app.module.ts
:
import { SafeUrlPipe } from './pipes/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.
And, in your Angular module declarations section:
@NgModule({ declarations: [SafeUrlPipe],...});
Now, to use in your view:
<div> <span>Skype: <a [href]="'sip:<johndoe@contoso.com>' | safeUrl">johndoe@contoso.com</a></span> </div>