There is a single mat-checkbox element that is used in the mobile version as well.
The issue arises when there are two separate sections, one for desktop and one for mobile. The desktop version of <mat-checkbox> functions correctly with select and unselect actions, but the mobile option triggers the desktop version checkbox instead of operating independently.
How can I make <mat-checkbox> handle both events separately without interfering with 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);
}