working modals added

This commit is contained in:
piratefinn 2017-11-15 15:36:45 +00:00
parent 98d683612c
commit f261fce7f5
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 { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer'; import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window'; import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
import { ModalModule } from 'ngx-bootstrap/modal';
import { CurrencyPipe } from '@angular/common'; import { CurrencyPipe } from '@angular/common';
@ -51,6 +52,7 @@ import { environment } from '../../environments/environment';
BsDropdownModule, BsDropdownModule,
NgxPaginationModule, NgxPaginationModule,
DashboardRoutingModule, DashboardRoutingModule,
ModalModule.forRoot(),
], ],
declarations: [ declarations: [
DashboardComponent, DashboardComponent,

View file

@ -29,10 +29,21 @@
[latitude]="m.latitude" [latitude]="m.latitude"
[longitude]="m.longitude" [longitude]="m.longitude"
[openInfoWindow]="false" [openInfoWindow]="false"
(markerClick)="onMarkerClick(m)"> (markerClick)="onMarkerClick(m, template)">
</agm-marker> </agm-marker>
</agm-marker-cluster> </agm-marker-cluster>
</agm-map> </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> </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 { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core'; 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'; import 'rxjs/add/operator/map';
@Component({ @Component({
@ -11,6 +13,8 @@ export class TrailMapComponent2 implements OnInit {
lat: number = 54.0466; lat: number = 54.0466;
lng: number = -2.8007; lng: number = -2.8007;
zoom: number = 12; zoom: number = 12;
public modalRef: BsModalRef;
clickedMarker: any;
dataReceived: string = 'yes'; dataReceived: string = 'yes';
@ -20,7 +24,8 @@ export class TrailMapComponent2 implements OnInit {
constructor( constructor(
private api: ApiService, private api: ApiService,
) { } private modalService: BsModalService,
) {}
ngOnInit(): void { } ngOnInit(): void { }
@ -28,8 +33,14 @@ export class TrailMapComponent2 implements OnInit {
this.map = map; 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); console.log(clickedMarker);
this.clickedMarker = clickedMarker;
this.openModal(template);
} }
public viewBoundsChanged() { public viewBoundsChanged() {