Angular 9: Disable label checkbox (not the box)

Question

I need it in order to make clickable just a piece of the checkbox label (Privacy Policy). This is the snippet:

    <div>
      <mat-checkbox required formControlName="privacyCheck" [checked]="false">
        <b style="color: crimson">*</b>Accetto la
        <i style="color: #770E0E" (click)="printDebug()">privacy policy</i>
        e i termini di condizione dell'utilizzo del servizio.
      </mat-checkbox>
    </div>

At the moment, if i click on the italic text ("privacy policy"), i got the printDebug but of course the checkbox will be setted to "checked".

I tried several solutions using CSS property pointer-events: none !important; on .mat-checkbox-layout .mat-checkbox-label span, .mat-checkbox-layout .mat-checkbox-label, and so on.

---

Answer 1

How about a good old fashioned stopPropagation()?

_{I was a bit too quick with my answer}

You need to do preventDefault(), because the content of the mat-checkbox will be put inside a <label> and it's default browser behavior to check a checkbox if you click on the attached label.

<i style="color: #770E0E" (click)="printDebug($event)">privacy policy</i>

printDebug(event: MouseEvent) {
  event.preventDefault();
  // ...
}

If you are using the ripple effect from material, this will still be triggered. If you do not want this, you will have to do a .stopPropagation() on mousedown:

<i style="color: #770E0E" (mousedown)="$event.stopPropagation()" 
                          (click)="printDebug($event)">privacy policy</i>

stackblitz