From 576d7f05006d17920a1e15272c6ea5f4014c97fd Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Wed, 13 Dec 2023 00:05:08 -0800
Subject: [PATCH] Use angular material for checkbox component

---
 mesop/components/checkbox/checkbox.ng.html | 9 ++-------
 mesop/components/checkbox/checkbox.ts      | 9 +++++----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/mesop/components/checkbox/checkbox.ng.html b/mesop/components/checkbox/checkbox.ng.html
index d2be77c3c..af1d63642 100644
--- 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
index 397f42b0a..ba9529605 100644
--- 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);