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>
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.