How to avoid adding prefix “unsafe” to link by Angular-2?

Question

I am developing a mobile app using angular2 and ionic 2, I have 3 buttons for call, sms and email as below

          <a ion-button href="tel:{{contact.cellphone}}" color="primary">
            <ion-icon name="call"></ion-icon>
            Call
          </a>
          <a ion-button href="sms:{{contact.cellphone}}" color="secondary">
            <ion-icon name="text"></ion-icon>
            SMS
          </a>
          <a ion-button href="mailto:{{contact.email}}" color="dark">
            <ion-icon name="mail"></ion-icon>
            Email
          </a>

Call and email are working fine, but not sms, it seems angular adds unsafe: in-front of my expression and it will become like below

<a color="secondary" ion-button="" ng-reflect-color="secondary" class="button button-md button-default button-default-md button-md-secondary" ng-reflect-href="unsafe:sms:+16475374201" href="unsafe:sms:+16475374201"><span class="button-inner">

even I tried this

      <a ion-button [attr.href]="'sms:'+contact.cellphone" color="secondary">
        <ion-icon name="text"></ion-icon>
        SMS
      </a>

still same issue,

When I don't use angular binding it's working fine, for example like this

          <a ion-button href="sms:+1647654654" color="secondary">
            <ion-icon name="text"></ion-icon>
            SMS
          </a>

Although it's related to angular but also I checked my config.xml and sms is allowed there

<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Update

After using @Apuu solution it become like below

          <a ion-button [attr.href]="'sms:'+contact.cellphone | safeUrl" color="secondary">
            <ion-icon name="text"></ion-icon>
            SMS
          </a>

score 10 · Accepted Answer · edited Dec 11 '16 at 21:02

10

You can create a pipe service to change unsafe url to safe url.

Create a pipe service called safe-url.pipe.ts.

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);
}
}

Then use in your view.
Example :

<a ion-button [src]="'some_url' | safeUrl" color="secondary">
     <ion-icon name="text"></ion-icon>
     SMS
</a>

NOTE : Don't forget to inject this pipe service in your app.module.ts

import { SafeUrlPipe } from './shared/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.

And in your node module declarations section.

@NgModule({ declarations: [SafeUrlPipe],...});

edited Dec 11 '16 at 21:02

Reza

18,865
13
88
163

answered Nov 23 '16 at 05:29

Amruth

5,792
2
28
41

nice example, thanks – Avtandil Kavrelishvili Oct 06 '17 at 07:42
You are most welcome @AvtandilKavrelishvili, keep coding .... – Amruth Oct 06 '17 at 09:50
Also worth noting that in this specific case, you can't cobble the URL protocol together in the template. Instead, any link (like a tel or sms link) would need the protocol appended onto it. ``, where `phoneNumber` is `tel:...` – daniel.caspers Jan 20 '18 at 20:16

How to avoid adding prefix “unsafe” to link by Angular-2?

Update

1 Answers1

Linked