Angular2+ SafeUrl Pipe

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>