I have incorporated Google Maps into my application in order to showcase shapes (polygons/circles) and markers. To interact with Google Maps in Angular, I am utilizing the type definition "npm install --save @types/googlemaps". Upon clicking a shape, I need to open a modal dialog. Here is the code snippet I've written to achieve this:
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);
});
The modal popup opens successfully and the constructor of SiteFloorDetailsComponent is invoked. However, the ngOnInit function within SiteFloorDetailsComponent is not triggered, resulting in dynamic data and contents not loading. Furthermore, when attempting to close the modal popup using the close button, the close event within SiteFloorDetailsComponent is fired but the modal does not close. No errors are displayed in the console. When I move the modal opening code out of the shape click event handler as shown below, the functionality works as expected:
this.config.data =
{
companyId: this.companyId,
siteId: 1,
siteName: ""
};
this.dialog.open(SiteFloorDetailsComponent, this.config);
google.maps.event.addListener(shape, 'click', (event) => {
});
SiteFloorDetailsComponent TypeScript 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">
<div style="width:10px;"></div>
<button type="button" (click)="closeModel()" class="cust-btn">Close</button>
</md-dialog-actions>
If anyone has insights or suggestions on what might be missing, I'd greatly appreciate your assistance.