working modals added
This commit is contained in:
parent
5ed6bfe7f3
commit
7843a87fd6
3 changed files with 28 additions and 4 deletions
|
@ -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,
|
||||
|
|
|
@ -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">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This is a modal.
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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() {
|
||||
|
|
Reference in a new issue