Changing the marker color when hovering on corresponding element -> Angular 4

I'm trying to change the color of google marker dynamically when I hover on one of the element that is in different component. I'm still learning Angular and I tried using Observables but without any success.

I have main.view component that stores all the cards( I call them events). Here is the part of main-view.component.ts code:

constructor( private eventService: EventsDataService) {
    }
      ngOnInit() {
        this.getEvents();
      }

I'm injecting the service that fetches the data for my cards from the server and use getEvents method to convert it to JSON data using Observable. Then I use 2 *ngFor directives in html template to iterate over this data and fill the cards and markers. Here is the code:

main-view.component.html

 <app-event-card *ngFor="let event of events; let i = index"></app-event-card>
  </section>
  <aside class="mapContainer"  [class.fixed]="fixed">
      <agm-map [class.fixed]="fixed"  [latitude]= "latitude"  [longitude]="longitude" >
        <agm-marker *ngFor="let event of events; let i = index"
        [latitude]= "event.location.coordinates[0]"
        [longitude]="event.location.coordinates[1]"
        label="{{event.price +'AUD'}}">
      </agm-marker>
      </agm-map>
  </aside>

Now I would like to change the color or any property of the marker when I hover on one of the cards that corresponds to the marker but I have no idea how can I connect the data for those both components.

I would appreciate any help or tips regarding this issue.

Thanks

2 answers

  • answered 2018-04-14 15:12 JB Nizet

    I don't know how your components look like, but all you need is something like that:

    <app-event-card (mouseenter)="event.hovered = true" (mouseleave)="event.hovered = false" *ngFor="let event of events; let i = index"></app-event-card>
    
    <aside ...>
      <agm-map ...>
        <agm-marker *ngFor="let event of events; let i = index"
          ...
          [color]="event.hovered ? 'blue' : 'red'">
        </agm-marker>
      </agm-map>
    </aside>
    

    Demo

  • answered 2018-04-14 16:22 Deep 3015

    list of markers outside map

    <ul><li *ngFor="let data of markers" (mouseenter)="updateColor(data.lat)" (mouseleave)="updateColorR(data.lat)">{{data.lat}}</li></ul>
    

    markers

      <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [markerDraggable]="m.draggable"
      [iconUrl]="m.icon"
      (dragEnd)="markerDragEnd(m, $event)">
    

    component

    updateColor(data:any){
    this.markers.map((el,i)=>{
      if(el.lat==data){
        this.markers[i].icon='https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|4286f4';
    
      }
    })
    }
    updateColorR(data:any){
    this.markers.map((el,i)=>{
      if(el.lat==data){
        this.markers[i].icon='https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FF0000';
    
      }
    })
    }
    

    stackblitz demo