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>

by Joshua

Adding Skype and Skype for Business HTML Links

Have you ever needed to add links into a web page that enabled a visitor to click to begin a chat or phone call with a Skype or Skype for business user? If you have the necessary plug-ins enabled in the browser, a phone number may be recognized automatically, but that can't always be guaranteed. There are native URI's to ensure that, if a site visitor has Skype or Skype for Business installed, a chat or phone call will be initialized.

Read more

by Joshua