working modals added

This commit is contained in:
piratefinn 2017-11-15 15:36:45 +00:00
parent 5ed6bfe7f3
commit 7843a87fd6
3 changed files with 28 additions and 4 deletions

View file

@ -7,6 +7,7 @@ import { NgxPaginationModule } from 'ngx-pagination';
import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
import { ModalModule } from 'ngx-bootstrap/modal';
import { CurrencyPipe } from '@angular/common';
@ -51,6 +52,7 @@ import { environment } from '../../environments/environment';
BsDropdownModule,
NgxPaginationModule,
DashboardRoutingModule,
ModalModule.forRoot(),
],
declarations: [
DashboardComponent,

View file

@ -29,10 +29,21 @@
[latitude]="m.latitude"
[longitude]="m.longitude"
[openInfoWindow]="false"
(markerClick)="onMarkerClick(m)">
(markerClick)="onMarkerClick(m, template)">
</agm-marker>
</agm-marker-cluster>
</agm-map>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">{{clickedMarker.name}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
</ng-template>
</div>
</div>
</div>

View file

@ -1,6 +1,8 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import 'rxjs/add/operator/map';
@Component({
@ -11,6 +13,8 @@ export class TrailMapComponent2 implements OnInit {
lat: number = 54.0466;
lng: number = -2.8007;
zoom: number = 12;
public modalRef: BsModalRef;
clickedMarker: any;
dataReceived: string = 'yes';
@ -20,6 +24,7 @@ export class TrailMapComponent2 implements OnInit {
constructor(
private api: ApiService,
private modalService: BsModalService,
) {}
ngOnInit(): void { }
@ -28,8 +33,14 @@ export class TrailMapComponent2 implements OnInit {
this.map = map;
}
public onMarkerClick(clickedMarker) {
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
console.log(clickedMarker);
this.clickedMarker = clickedMarker;
this.openModal(template);
}
public viewBoundsChanged() {