I have one mat-checkbox which is also part of mobile version.

When we have two separate parts, one for desktop and one for mobile. The desktop <mat-checkbox> works on select and unselect properly, whereas the mobile option when we click triggers the desktop version checkbox instead of just selecting and unselecting the mobile version.

How to let <mat-checkbox> handle both events separately independent of each other?

HTML:

<div class="class-a">
  <label
    [ngClass]="{'class-b': valueTrigger}">
    <mat-checkbox
      class="checkbox"
      [(ngModel)]="valueTrigger"
      (input)="toggleHasTrigger($event.target.checked)"
      id="test"
      type="checkbox"
      name="testing" ngDefaultControl
    >
      I am here!
    </mat-checkbox>
  </label>
</div>

TS:

initValueTrigger(): void {
    this.valueTrigger = !this.asset.Unchecked;
    this.toggleHasTriggerEvent.emit(this.valueTrigger);
  }
    
toggleHasTrigger(toggleValue: boolean): void {
        this.asset.Unchecked = !toggleValue;
        this.valueTrigger = toggleValue;
        this.toggleHasTriggerEvent.emit(this.valueTrigger);
      }