Tengo una mat-checkbox que también forma parte de la versión móvil.

Cuando tenemos dos partes separadas, una para escritorio y otra para móvil. El escritorio <mat-checkbox> funciona al seleccionar y anular la selección correctamente, mientras que la opción móvil cuando hacemos clic activa la casilla de verificación de la versión de escritorio en lugar de simplemente seleccionar y anular la selección de la versión móvil.

¿Cómo permitir que <mat-checkbox> maneje ambos eventos por separado, independientemente el uno del otro?

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); }