Embedding a link in a checkbox label

Ionic Framework ionic-v3
1

I’m trying to embed a link to our terms of service and privacy policy in a checkbox label and wanted to know what they best way to do this is in Ionic 2+. I also wanted to know if it is possible to open a modal using a click even instead of navigating to another page.

 <ion-item>
    <ion-label text-wrap>Agree to <a [href]="href"><span class="terms_privacy_text">Terms of Service</span></a> and <span class="terms_privacy_text" >Privacy Policy</span></ion-label>
    <ion-checkbox [(ngModel)]="account.terms" name="terms" #terms="ngModel" required></ion-checkbox>
 </ion-item>
2

Ran into the same issue, finally found a workaround.

<ion-item text-wrap>
 <ion-row>
    <ion-col col-2 no-padding no-margin>
      <ion-item no-padding no-margin no-lines>
        <ion-checkbox [(ngModel)]="agreed"></ion-checkbox>
      </ion-item>
    </ion-col>
    <ion-col col-10 no-padding no-margin>
      <ion-item no-padding no-margin no-lines>
        Agree to <a target="_blank" href="http://www.terms-of-service.com">Terms of Service</a> and <a target="_blank" href="http://www.privacy-policy.com">Privacy Policy</a>.
      </ion-item>
    </ion-col>
  </ion-row>
</ion-item>
3 Likes
3

Thank you dalezak! This was very helpful.

4

@mwlodar12 just noticed this comment, it might also help you :+1:

.input-cover {
  display: none;
}
1 Like