title: How to avoid adding prefix “unsafe” to link by Angular-2?
body: <p>I am developing a mobile app using <code>angular2</code> and <code>ionic 2</code>,
  I have 3 <code>buttons</code> for <code>call</code>, <code>sms</code> and <code>email</code> as below</p>
  
  <pre><code>          &lt;a ion-button href="tel:{{contact.cellphone}}" color="primary"&gt;
              &lt;ion-icon name="call"&gt;&lt;/ion-icon&gt;
              Call
            &lt;/a&gt;
            &lt;a ion-button href="sms:{{contact.cellphone}}" color="secondary"&gt;
              &lt;ion-icon name="text"&gt;&lt;/ion-icon&gt;
              SMS
            &lt;/a&gt;
            &lt;a ion-button href="mailto:{{contact.email}}" color="dark"&gt;
              &lt;ion-icon name="mail"&gt;&lt;/ion-icon&gt;
              Email
            &lt;/a&gt;
  </code></pre>
  
  <p><code>Call</code> and <code>email</code> are working fine, but not <code>sms</code>, it seems angular adds <code>unsafe:</code> in-front of my expression and it will become like below</p>
  
  <pre><code>&lt;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"&gt;&lt;span class="button-inner"&gt;
  </code></pre>
  
  <p>even I tried this </p>
  
  <pre><code>      &lt;a ion-button [attr.href]="'sms:'+contact.cellphone" color="secondary"&gt;
          &lt;ion-icon name="text"&gt;&lt;/ion-icon&gt;
          SMS
        &lt;/a&gt;
  </code></pre>
  
  <p>still same issue,</p>
  
  <p>When I don't use angular binding it's working fine, for example like this</p>
  
  <pre><code>          &lt;a ion-button href="sms:+1647654654" color="secondary"&gt;
              &lt;ion-icon name="text"&gt;&lt;/ion-icon&gt;
              SMS
            &lt;/a&gt;
  </code></pre>
  
  <p>Although it's related to angular but also I checked my <code>config.xml</code> and <code>sms</code> is allowed there</p>
  
  <pre><code>&lt;allow-intent href="tel:*" /&gt;
  &lt;allow-intent href="sms:*" /&gt;
  &lt;allow-intent href="mailto:*" /&gt;
  &lt;allow-intent href="geo:*" /&gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>After using @Apuu solution it become like below</p>
  
  <pre><code>          &lt;a ion-button [attr.href]="'sms:'+contact.cellphone | safeUrl" color="secondary"&gt;
              &lt;ion-icon name="text"&gt;&lt;/ion-icon&gt;
              SMS
            &lt;/a&gt;
  </code></pre>