Slides using *ngFor, get slide by child item


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';

  selector: 'page-locations',
  templateUrl: 'locations.html',
export class LocationsPage {

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

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

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

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

  public placeMarkers(locations: Location[]) {
    for (let location of this._orderPipe.transform(locations, 'id')){ position: location.latlng, icon: LocationsConstants.MarkerIcon })
        .then((marker: Marker) => {
          marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(e => this.onMarkerClick(e,;
        }).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));