SMS messages blocked in Ionic 2 *ngFor

Question

I am using SMS messages in my ionic 2 App. I have the newest version of Cordova CLI and latest version of Ionic 2.

When I use

<a href="sms:14038000000"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>

It works fine as sms:14038000000,

when I use

<ion-card *ngFor="let item of corp">
    <div class="contact-name">
        {{ item.name}}
    </div>
    <div class="contact-content">
        <a href="sms:{{item.sms}}"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
    </div>
</ion-card>

The SMS comes up as unsafe:sms:14038000000

In ionic 1 app.js I used

.config(function($compileProvider){
   $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|ftp|mailto|file|sms|tel):/);
})

To solve this issue.

Is there a similar solution for Ionic 2 app.ts

Answer 1

UPADTE

Just like @George Huang mentioned, DomSanitizationService was renamed to DomSanitizer in Angular RC 6.

All you need to do to avoid Angular2 marking your href as unsafe, is to import DomSanitizer like this:

import { DomSanitizer } from '@angular/platform-browser';

Create an instance in your constructor:

constructor(private sanitizer: DomSanitizer, ...) { 
    //...   
}

And then use the bypassSecurityTrustUrl(...) method like this:

sanitize(url:string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

Finally, in your view use that method:

<ion-content>
  <ion-card *ngFor="let item of corp">
    <div class="contact-name">
        {{ item.name}}
    </div>
    <div class="contact-content">
        <a [href]="sanitize('sms:' + item.sms)"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
    </div>
</ion-card>
</ion-content>

---

Old answer:

All you need to do to avoid Angular2 marking your href as unsafe, is to import DomSanitizationService like this:

import { DomSanitizationService } from '@angular/platform-browser';

Create an instance in your constructor:

constructor(private sanitizer: DomSanitizationService, ...) { 
    //...   
}

And then use the bypassSecurityTrustUrl(...) method like this:

sanitize(url:string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

Finally, in your view use that method:

<ion-content>
  <ion-card *ngFor="let item of corp">
    <div class="contact-name">
        {{ item.name}}
    </div>
    <div class="contact-content">
        <a [href]="sanitize('sms:' + item.sms)"><button outline><ion-icon name="ios-chatbubbles"></ion-icon></button></a>
    </div>
</ion-card>
</ion-content>