Use angular material for checkbox component

google · Dec 13, 2023 · 576d7f0 · 576d7f0
1 parent 147611f
commit 576d7f0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/mesop/components/checkbox/checkbox.ng.html b/mesop/components/checkbox/checkbox.ng.html
@@ -1,8 +1,3 @@
-<div>
-  <input
-    type="checkbox"
-    [checked]="isChecked"
-    (change)="handleCheckboxChange($event)"
-  />
+<mat-checkbox [checked]="isChecked" (change)="handleCheckboxChange($event)">
   {{config().getLabel()}}
-</div>
+</mat-checkbox>
diff --git a/mesop/components/checkbox/checkbox.ts b/mesop/components/checkbox/checkbox.ts
@@ -6,12 +6,14 @@ import {
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
 import {CheckboxType} from 'mesop/mesop/components/checkbox/checkbox_jspb_proto_pb/mesop/components/checkbox/checkbox_pb';
 import {Channel} from '../../web/src/services/channel';
+import {MatCheckboxChange, MatCheckboxModule} from '@angular/material/checkbox';
 
 @Component({
   selector: 'mesop-checkbox',
   templateUrl: 'checkbox.ng.html',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatCheckboxModule],
 })
 export class CheckboxComponent {
   @Input({required: true}) type!: Type;
@@ -31,11 +33,10 @@ export class CheckboxComponent {
     return this._config;
   }
 
-  handleCheckboxChange(event: any) {
-    console.log('Checkbox is now:', event.target.checked);
-    this.isChecked = event.target.checked;
+  handleCheckboxChange(event: MatCheckboxChange) {
+    this.isChecked = event.checked;
     const userEvent = new UserEvent();
-    userEvent.setBool(event.target.checked);
+    userEvent.setBool(event.checked);
     userEvent.setHandlerId(this.config().getOnUpdateHandlerId()!);
     userEvent.setKey(this.key);
     this.channel.dispatch(userEvent);