Prevent checkbox Label to Toggle the checkBox - css

Question

Here is my checkbox in angular and i want to prevent the default behaviour of it.
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">Name</mat-checkbox>
Here whenever i click on name label...the checkbox gets toggled which i do not want to..
How can i prevent this from toggling when click on label . I have tried all others post too but I could not come up with the solution . I can not use jQuery.

Answer 1

Based on #Mike S. comment:
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
<span (click)="myCheck($event)">Name</span>
</mat-checkbox>
in your component typescript code:
myCheck(event) {
event.preventDefault();
//YOUR LOGIC
}

Answer 2

you need to add label after completing the <mat-checkbox> tag.
According to your design, you can add style to the <mat-label>
Replace your line of code with the below shown code:
<div layout=row>
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
<mat-label> Name </mat-lable>
</div>
above image is generated by below code
<div align="left" class="user-modified-rule">
<div layout="row">
<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
</mat-checkbox>
<mat-label>
<rule></rule>
</mat-label>
</div>
</div>
and css code
.user-modified-rule {
display: inline-block;
width : 48%;
}