build: use ngModel in google map demo

Adding new options to the Google Maps demo has been a bit cumbersome, because it's using `click` handlers on checkboxes to manage the state. These changes switch to using `ngModel`.

Author: crisbeto

src/dev-app/google-map/BUILD.bazel

@@ -11,6 +11,7 @@ ng_module(
     ],
     deps = [
         "//src/google-maps",
+        "@npm//@angular/forms",
     ],
 )
 

src/dev-app/google-map/google-map-demo.html

@@ -98,73 +98,80 @@
     <div>
       <label for="polyline-checkbox">
         Toggle Polyline
-        <input type="checkbox" (click)="togglePolylineDisplay()">
+        <input type="checkbox" [(ngModel)]="isPolylineDisplayed">
       </label>
     </div>
     <div>
       <label for="editable-polyline-checkbox">
         Toggle Editable Polyline
         <input type="checkbox"
               [disabled]="!isPolylineDisplayed"
-              (click)="toggleEditablePolyline()">
+              [ngModel]="polylineOptions.editable"
+              (ngModelChange)="editablePolylineChanged($event)">
       </label>
     </div>
 
     <div>
       <label for="polygon-checkbox">
         Toggle Polygon
-        <input type="checkbox" (click)="togglePolygonDisplay()">
+        <input type="checkbox" [(ngModel)]="isPolygonDisplayed">
       </label>
     </div>
     <div>
       <label for="editable-polygon-checkbox">
         Toggle Editable Polygon
         <input type="checkbox"
               [disabled]="!isPolygonDisplayed"
-              (click)="toggleEditablePolygon()">
+              [ngModel]="polygonOptions.editable"
+              (ngModelChange)="editablePolygonChanged($event)">
       </label>
     </div>
 
     <div>
       <label for="rectangle-checkbox">
         Toggle Rectangle
-        <input type="checkbox" (click)="toggleRectangleDisplay()">
+        <input type="checkbox" [(ngModel)]="isRectangleDisplayed">
       </label>
     </div>
     <div>
       <label for="editable-rectangle-checkbox">
         Toggle Editable Rectangle
         <input type="checkbox"
               [disabled]="!isRectangleDisplayed"
-              (click)="toggleEditableRectangle()">
+              [ngModel]="rectangleOptions.editable"
+              (ngModelChange)="editableRectangleChanged($event)">
       </label>
     </div>
 
     <div>
       <label for="circle-checkbox">
         Toggle Circle
-        <input type="checkbox" (click)="toggleCircleDisplay()">
+        <input type="checkbox" [(ngModel)]="isCircleDisplayed">
       </label>
     </div>
     <div>
       <label for="editable-circle-checkbox">
         Toggle Editable Circle
-        <input type="checkbox" [disabled]="!isCircleDisplayed" (click)="toggleEditableCircle()">
+        <input
+          type="checkbox"
+          [disabled]="!isCircleDisplayed"
+          [ngModel]="circleOptions.editable"
+          (ngModelChange)="editableCircleChanged($event)">
       </label>
     </div>
 
     <div>
       <label for="ground-overlay-checkbox">
         Toggle Ground Overlay
-        <input type="checkbox" (click)="toggleGroundOverlayDisplay()">
+        <input type="checkbox" [(ngModel)]="isGroundOverlayDisplayed">
       </label>
     </div>
 
     <div>
       <label for="ground-overlay-image">
         Ground Overlay image
 
-        <select id="ground-overlay-image" (change)="groundOverlayUrlChanged($event)">
+        <select id="ground-overlay-image" [(ngModel)]="groundOverlayUrl">
           @for (image of groundOverlayImages; track image) {
             <option [value]="image.url">{{image.title}}</option>
           }
@@ -175,28 +182,28 @@
     <div>
       <label for="kml-layer-checkbox">
         Toggle KML Layer
-        <input type="checkbox" (click)="toggleKmlLayerDisplay()">
+        <input type="checkbox" [(ngModel)]="isKmlLayerDisplayed">
       </label>
     </div>
 
     <div>
       <label for="traffic-layer-checkbox">
         Toggle Traffic Layer
-        <input type="checkbox" (click)="toggleTrafficLayerDisplay()">
+        <input type="checkbox" [(ngModel)]="isTrafficLayerDisplayed">
       </label>
     </div>
 
     <div>
       <label for="transit-layer-checkbox">
         Toggle Transit Layer
-        <input type="checkbox" (click)="toggleTransitLayerDisplay()">
+        <input type="checkbox" [(ngModel)]="isTransitLayerDisplayed">
       </label>
     </div>
 
     <div>
       <label for="bicycling-layer-checkbox">
         Toggle Bicycling Layer
-        <input type="checkbox" (click)="toggleBicyclingLayerDisplay()">
+        <input type="checkbox" [(ngModel)]="isBicyclingLayerDisplayed">
       </label>
     </div>
 
@@ -210,14 +217,17 @@
     <div>
       <label>
         Toggle Advanced Marker
-        <input type="checkbox" (click)="toggleAdvancedMarker()">
+        <input type="checkbox" [(ngModel)]="hasAdvancedMarker">
       </label>
     </div>
 
     <div>
       <label>
         Toggle custom content for Advanced Marker
-        <input type="checkbox" (click)="toggleAdvancedMarkerCustomContent()">
+        <input
+          type="checkbox"
+          [(ngModel)]="hasAdvancedMarkerCustomContent"
+          [disabled]="!hasAdvancedMarker">
       </label>
     </div>
 

src/dev-app/google-map/google-map-demo.ts

@@ -14,6 +14,7 @@ import {
   ViewChild,
   inject,
 } from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {
   GoogleMap,
   MapAdvancedMarker,
@@ -85,6 +86,7 @@ let apiLoadingPromise: Promise<unknown> | null = null;
     MapRectangle,
     MapTrafficLayer,
     MapTransitLayer,
+    FormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -187,50 +189,34 @@ export class GoogleMapDemo {
     this.markerPositions.pop();
   }
 
-  togglePolylineDisplay() {
-    this.isPolylineDisplayed = !this.isPolylineDisplayed;
-  }
-
-  toggleEditablePolyline() {
+  editablePolylineChanged(editable: boolean) {
     this.polylineOptions = {
       ...this.polylineOptions,
-      editable: !this.polylineOptions.editable,
+      editable,
       path: this.polyline.getPath(),
     };
   }
 
-  togglePolygonDisplay() {
-    this.isPolygonDisplayed = !this.isPolygonDisplayed;
-  }
-
-  toggleEditablePolygon() {
+  editablePolygonChanged(editable: boolean) {
     this.polygonOptions = {
       ...this.polygonOptions,
-      editable: !this.polygonOptions.editable,
+      editable,
       paths: this.polygon.getPaths(),
     };
   }
 
-  toggleRectangleDisplay() {
-    this.isRectangleDisplayed = !this.isRectangleDisplayed;
-  }
-
-  toggleEditableRectangle() {
+  editableRectangleChanged(editable: boolean) {
     this.rectangleOptions = {
       ...this.rectangleOptions,
-      editable: !this.rectangleOptions.editable,
+      editable,
       bounds: this.rectangle.getBounds(),
     };
   }
 
-  toggleCircleDisplay() {
-    this.isCircleDisplayed = !this.isCircleDisplayed;
-  }
-
-  toggleEditableCircle() {
+  editableCircleChanged(editable: boolean) {
     this.circleOptions = {
       ...this.circleOptions,
-      editable: !this.circleOptions.editable,
+      editable,
       center: this.circle.getCenter(),
       radius: this.circle.getRadius(),
     };
@@ -240,38 +226,6 @@ export class GoogleMapDemo {
     this.mapTypeId = (event.target as HTMLSelectElement).value as unknown as google.maps.MapTypeId;
   }
 
-  toggleGroundOverlayDisplay() {
-    this.isGroundOverlayDisplayed = !this.isGroundOverlayDisplayed;
-  }
-
-  groundOverlayUrlChanged(event: Event) {
-    this.groundOverlayUrl = (event.target as HTMLSelectElement).value;
-  }
-
-  toggleKmlLayerDisplay() {
-    this.isKmlLayerDisplayed = !this.isKmlLayerDisplayed;
-  }
-
-  toggleTrafficLayerDisplay() {
-    this.isTrafficLayerDisplayed = !this.isTrafficLayerDisplayed;
-  }
-
-  toggleTransitLayerDisplay() {
-    this.isTransitLayerDisplayed = !this.isTransitLayerDisplayed;
-  }
-
-  toggleBicyclingLayerDisplay() {
-    this.isBicyclingLayerDisplayed = !this.isBicyclingLayerDisplayed;
-  }
-
-  toggleAdvancedMarker() {
-    this.hasAdvancedMarker = !this.hasAdvancedMarker;
-  }
-
-  toggleAdvancedMarkerCustomContent() {
-    this.hasAdvancedMarkerCustomContent = !this.hasAdvancedMarkerCustomContent;
-  }
-
   calculateDirections() {
     if (this.markerPositions.length >= 2) {
       const request: google.maps.DirectionsRequest = {