Issue
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);
}
Solution
You might want to provide separate ids to the checkboxes for both mobile and web views
For example: test_web and test_mobile
Answered By - Devashish Sarmah
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.