working modals added

src/app/dashboard/dashboard.module.ts

@@ -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,

src/app/dashboard/trail-map-2.component.html

@@ -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>

src/app/dashboard/trail-map-2.component.ts

@@ -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() {