angular/material modal dialog does not work on google map's shape click

Question

In my application I am using Google map to display shapes(polygon/circles) and markers. I am using google map's type definition "npm install --save @types/googlemaps" to play with google map in angular. I have to open a modal dialog on click of shape. I have written below code to do so:

google.maps.event.addListener(shape, 'click', (event) => {
        let customData = shape.CustomData;

        this.config.data =
            {
                companyId: this.companyId,
                siteId: customData.SiteId,
                siteName: customData.SiteName
            };
        this.dialog.open(SiteFloorDetailsComponent, this.config);

    });

Its opening the modal pop and constructor of the SiteFloorDetailsComponent is also being called. However ngOnInit function in SiteFloorDetailsComponent is not being called and its not loading the data dynamically and contents. Also if I try to close the modal pop using close button, close event in SiteFloorDetailsComponent is being called but modal pop is not closing, its also not giving any error in console window. If I move the modal opening code out of shape click event like below its working fine:

 this.config.data =
        {
            companyId: this.companyId,
            siteId: 1,
            siteName: ""
        };
    this.dialog.open(SiteFloorDetailsComponent, this.config);

    google.maps.event.addListener(shape, 'click', (event) => {

    });

SiteFloorDetailsComponent ts code:

import { Inject, Component, ViewEncapsulation, OnInit, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';

import { AssetsService } from '../../../Services/Assets/assets.service';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
import { LowryToastyService } from '../../../Services/Shared/lowrytoasty.service';
import { ErrorLoggerService } from '../../../Services/Shared/errorlogger.service';

@Component({
selector: "SiteFloorDetailsComponent",
templateUrl: '../app/Components/Assets/AssetSearch/site-floor-details.component.html',
providers: [AssetsService]
})
export class SiteFloorDetailsComponent {
siteFloorDetails: any[];
siteName: string;
companyId: number;

constructor(
    @Inject(MD_DIALOG_DATA) private modelPopupData:
        {
            companyId: number, siteId: number, siteName: string
        },
    public dialogRef: MdDialogRef<SiteFloorDetailsComponent>,
    private assetService: AssetsService,
    private slimLoadingBarService: SlimLoadingBarService,
    private lowryToastyService: LowryToastyService,
    private errorLoggerService: ErrorLoggerService,
    private router: Router) {
    this.siteName = this.modelPopupData.siteName;
    this.companyId = this.modelPopupData.companyId;
};

ngOnInit() {
    debugger;

    this.assetService.getBuildingFloorDetails(this.modelPopupData.companyId, this.modelPopupData.siteId).subscribe(
        (jsonData) => {
            this.siteFloorDetails = jsonData;
        },
        (error) => {
            this.errorLoggerService.logErrorToServer("SiteFloorDetailsComponent", "ngOnInit", error);
        },
        () => {
            //this.slimLoadingBarService.complete();
        }
    );
}

closeModel() {
    this.dialogRef.close();
};
}

site-floor-details.component.html:

<h1 md-dialog-title class="primary-color borderBtm ">
Site-Floor Details

</h1>

<md-dialog-content class="accent-color">
<div style="min-width:200px">
    <div class="row" style="text-align:center;">
        <h5>{{siteName}}</h5>
    </div>
    <div class="row">
        <div *ngFor="let item of siteFloorDetails" class="col-md-3">
            <a href="#" [routerLink]="['/RTLSAssets/'+companyId+ '/' + item.FloorId]">{{item.BuildingName}} - {{item.FloorName}}</a>
        </div>
    </div>
</div>
</md-dialog-content>
<md-dialog-actions class="float-right">
    <!--<button *ngIf="showSaveButton" type="button" class="cust-    btn">Save</button>-->
    <div style="width:10px;"></div>
    <button type="button" (click)="closeModel()" class="cust-btn">Close</button>
</md-dialog-actions>

Please help me and let me know, if I am missing anything.

Answer 1

I found solusion. As events fired from google.map.event is outside Angular context, you need to use NgZone::run method.

   constructor(
     private zone: NgZone) {
   }
   // ...
   google.maps.event.addListener(shape, 'click', (event) => {
        let customData = shape.CustomData;

        this.config.data =
            {
                companyId: this.companyId,
                siteId: customData.SiteId,
                siteName: customData.SiteName
            };
        this.zone.run(() => {
          this.dialog.open(SiteFloorDetailsComponent, this.config);
        });


    });

Answer 2

Your component needs to implement OnInit, ie.:

import {OnInit} from '@angular/core';
// ...
export class SiteFloorDetailsComponent implements OnInit { }

Answer 3

Nice! I just saw the missing implements OnInit and stopped thinking =)

Correct me if I'm wrong but making an Observable out of the callback should work too, and is more useful in the long run, as you could pipe the source to have other side-effects or whatever. So something like:

const mapClickFactory = Observable.fromCallback(google.maps.event.addListener);
const source = mapClickFactory(shape, 'click');

this.subscriptions.push(
    source.subscribe(event => {
        let customData = shape.CustomData;
        this.config.data = {
            companyId: this.companyId,
            siteId: customData.SiteId,
            siteName: customData.SiteName
        };
        this.dialog.open(SiteFloorDetailsComponent, this.config);
    })
);
/* Remember to call this.subscriptions.forEach(sub => sub.unsubscribe())
   in ngOnDestroy() of this component! */