CODEWITHSUNDEEP
htmlangularionic-frameworkionic4
Sampath
Sampath

Reputation: 65870

Avoid checkbox clicked when label has been clicked

I have a checkbox and label like so. The problem here is I cannot click the href due to the whole section works as a single unit. i.e. when I clicked the label it fires the checkbox. So how can I separate or avoid this behavior? i.e. I need to click hyperlink.

  <ion-item>
    <ion-label class="long-text">I accept the Terms & Conditions and the Privacy Policy found
      <a href="#" (click)="goToPrivacyPolicy()">here</a></ion-label>
    <ion-checkbox [(ngModel)]="terms" slot="start"></ion-checkbox>
  </ion-item>

UI

enter image description here

Tried this: But no Luck yet?

.ts

  goToPrivacyPolicy(event) {
    event.stopPropagation(); //or event.preventDefault()
    this.iab.create(environment.privacyPolicy);
  }

html

<ion-item>
    <ion-label class="long-text">I accept the Terms & Conditions and the Privacy Policy found
      <a href="#" (click)="goToPrivacyPolicy($event)">here</a></ion-label>
    <ion-checkbox [(ngModel)]="terms" slot="start"></ion-checkbox>
  </ion-item>

Upvotes: 1

Views: 69

Answers (1)

Sourav Dutta
Sourav Dutta

Reputation: 1332

CHECK WORKING STACKBLITZ

<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>. found  <a href="#" (click)="goToPrivacyPolicy($event)">here</a>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-item>

Upvotes: 1

Related Questions