refactor(google-maps): use directive for map marker (#19641)

The Google Maps marker is currently marked as a component, but it isn't using any component features. These changes turn it into a directive since it also allows consumers to apply it on elements that are components.

Author: crisbeto

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

@@ -7,8 +7,11 @@
               (mapMousemove)="handleMove($event)"
               (mapRightclick)="handleRightclick()"
               [mapTypeId]="mapTypeId">
-    <map-marker #firstMarker [position]="center" (mapClick)="clickMarker(firstMarker)"></map-marker>
-    <map-marker #marker
+    <map-marker
+      #firstMarker="mapMarker"
+      [position]="center"
+      (mapClick)="clickMarker(firstMarker)"></map-marker>
+    <map-marker #marker="mapMarker"
                 *ngFor="let markerPosition of markerPositions"
                 [position]="markerPosition"
                 [options]="markerOptions"

src/google-maps/map-marker/map-marker.spec.ts

@@ -1,6 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
 import {async, TestBed} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
 
 import {DEFAULT_OPTIONS} from '../google-map/google-map';
 
@@ -124,44 +123,44 @@ describe('MapMarker', () => {
     createMarkerConstructorSpy(markerSpy).and.callThrough();
 
     const fixture = TestBed.createComponent(TestApp);
-    const markerComponent = fixture.debugElement.query(By.directive(MapMarker)).componentInstance;
     fixture.detectChanges();
+    const marker = fixture.componentInstance.marker;
 
     markerSpy.getAnimation.and.returnValue(null);
-    expect(markerComponent.getAnimation()).toBe(null);
+    expect(marker.getAnimation()).toBe(null);
 
     markerSpy.getClickable.and.returnValue(true);
-    expect(markerComponent.getClickable()).toBe(true);
+    expect(marker.getClickable()).toBe(true);
 
     markerSpy.getCursor.and.returnValue('cursor');
-    expect(markerComponent.getCursor()).toBe('cursor');
+    expect(marker.getCursor()).toBe('cursor');
 
     markerSpy.getDraggable.and.returnValue(true);
-    expect(markerComponent.getDraggable()).toBe(true);
+    expect(marker.getDraggable()).toBe(true);
 
     markerSpy.getIcon.and.returnValue('icon');
-    expect(markerComponent.getIcon()).toBe('icon');
+    expect(marker.getIcon()).toBe('icon');
 
     markerSpy.getLabel.and.returnValue(null);
-    expect(markerComponent.getLabel()).toBe(null);
+    expect(marker.getLabel()).toBe(null);
 
     markerSpy.getOpacity.and.returnValue(5);
-    expect(markerComponent.getOpacity()).toBe(5);
+    expect(marker.getOpacity()).toBe(5);
 
     markerSpy.getPosition.and.returnValue(null);
-    expect(markerComponent.getPosition()).toEqual(null);
+    expect(marker.getPosition()).toEqual(null);
 
     markerSpy.getShape.and.returnValue(null);
-    expect(markerComponent.getShape()).toBe(null);
+    expect(marker.getShape()).toBe(null);
 
     markerSpy.getTitle.and.returnValue('title');
-    expect(markerComponent.getTitle()).toBe('title');
+    expect(marker.getTitle()).toBe('title');
 
     markerSpy.getVisible.and.returnValue(true);
-    expect(markerComponent.getVisible()).toBe(true);
+    expect(marker.getVisible()).toBe(true);
 
     markerSpy.getZIndex.and.returnValue(2);
-    expect(markerComponent.getZIndex()).toBe(2);
+    expect(marker.getZIndex()).toBe(2);
   });
 
   it('initializes marker event handlers', () => {

src/google-maps/map-marker/map-marker.ts

@@ -9,16 +9,7 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="googlemaps" />
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewEncapsulation,
-  NgZone
-} from '@angular/core';
+import {Input, OnDestroy, OnInit, Output, NgZone, Directive} from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
 
@@ -39,12 +30,9 @@ export const DEFAULT_MARKER_OPTIONS = {
  *
  * See developers.google.com/maps/documentation/javascript/reference/marker
  */
-@Component({
+@Directive({
   selector: 'map-marker',
   exportAs: 'mapMarker',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
 })
 export class MapMarker implements OnInit, OnDestroy, MapAnchorPoint {
   private _eventManager = new MapEventManager(this._ngZone);

tools/public_api_guard/google-maps/google-maps.d.ts

@@ -174,7 +174,7 @@ export declare class MapMarker implements OnInit, OnDestroy, MapAnchorPoint {
     getZIndex(): number | null;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MapMarker, "map-marker", ["mapMarker"], { "options": "options"; "title": "title"; "position": "position"; "label": "label"; "clickable": "clickable"; }, { "animationChanged": "animationChanged"; "mapClick": "mapClick"; "clickableChanged": "clickableChanged"; "cursorChanged": "cursorChanged"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "draggableChanged": "draggableChanged"; "mapDragstart": "mapDragstart"; "flatChanged": "flatChanged"; "iconChanged": "iconChanged"; "mapMousedown": "mapMousedown"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "mapMouseup": "mapMouseup"; "positionChanged": "positionChanged"; "mapRightclick": "mapRightclick"; "shapeChanged": "shapeChanged"; "titleChanged": "titleChanged"; "visibleChanged": "visibleChanged"; "zindexChanged": "zindexChanged"; }, never, ["*"]>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MapMarker, "map-marker", ["mapMarker"], { "options": "options"; "title": "title"; "position": "position"; "label": "label"; "clickable": "clickable"; }, { "animationChanged": "animationChanged"; "mapClick": "mapClick"; "clickableChanged": "clickableChanged"; "cursorChanged": "cursorChanged"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "draggableChanged": "draggableChanged"; "mapDragstart": "mapDragstart"; "flatChanged": "flatChanged"; "iconChanged": "iconChanged"; "mapMousedown": "mapMousedown"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "mapMouseup": "mapMouseup"; "positionChanged": "positionChanged"; "mapRightclick": "mapRightclick"; "shapeChanged": "shapeChanged"; "titleChanged": "titleChanged"; "visibleChanged": "visibleChanged"; "zindexChanged": "zindexChanged"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<MapMarker, never>;
 }