Slides using *ngFor, get slide by child item

Ionic Framework ionic-v3
1

I have a case where I’m using Google Maps to display a list of locations using markers. For display, we are using ion-slides so the user can (eventually) slide through the items and when they tap a marker, it should move the slider to that particular slide.

I just can’t seem to figure out how to get it to work. I could use some help brainstorming…I have the following data points:

  • List of locations
  • List of markers

So if location.latlng === marker.latlng I found the index of the array…but that doesn’t mean that the ion-slide it’s on matches it’s index.

Any way I can achieve this?

import { HttpClient } from '@angular/common/http';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMap, GoogleMaps, GoogleMapsEvent, Marker } from "@ionic-native/google-maps";
import { IonicPage, Slides } from 'ionic-angular';
import { Location } from '../../models/location.model';
import { LocationsConstants } from './locations.constants';
import { Observable } from 'rxjs/Observable';
import { OrderPipe } from 'ngx-order-pipe';

@IonicPage()
@Component({
  selector: 'page-locations',
  templateUrl: 'locations.html',
})
export class LocationsPage {

  @ViewChild(Slides) slides: Slides;
  public map: GoogleMap;
  public locations: Observable<Location[]>;
  public markers: Marker[] = [];

  constructor(
    private _http: HttpClient,
    private _orderPipe: OrderPipe
  ) { }

  public ionViewDidLoad() {
    this.locations = this._http.get<Location[]>('./assets/data/locations.json');
    this.map = GoogleMaps.create('map', LocationsConstants.MapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => this.loadMap());
  }

  public loadMap() {
    this.locations.subscribe(locations => this.placeMarkers(locations));
  }

  public placeMarkers(locations: Location[]) {
    for (let location of this._orderPipe.transform(locations, 'id'))
      this.map.addMarker({ position: location.latlng, icon: LocationsConstants.MarkerIcon })
        .then((marker: Marker) => {
          console.log(location);
          marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(e => this.onMarkerClick(e, location.id));
          this.markers.push(marker);
        }).then(() => this.markers[0].setIcon(LocationsConstants.MarkerIconSelected));
  }

  public onMarkerClick(event: any[], id: number) {
    const location = event[0], marker = event[1];
    this.markers.forEach(marker => marker.setIcon(LocationsConstants.MarkerIcon));
    marker.setIcon(LocationsConstants.MarkerIconSelected);
    this.slides.slideTo(id);
  }

}