Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

hover

angular

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

like image 605
Maciej Czarnota Avatar asked Apr 14 '18 14:04

Maciej Czarnota


People also ask

How to change the list item BG-COLOR individually using ngfor in Angular 2+?

- GeeksforGeeks How to change the list item bg-color individually using ngFor in Angular 2+ ? We can solve this using *ngFor directive and attribute binding for binding the background colour. Using *ngFor directive iterate through a list of items in .html file. By using attribute binding, bind the background color for every item in the list.

How to populate an HTML table in Angular 4?

We often use an HTML table in our applications to show data. Tables are simple and you can use it to populate static and dynamic data. You can populate an HTML table in Angular 4 using the ngFor directive.

What is [ngclass] in angular?

The Angular 4 [ngClass] is a built-in directive, which you can use to style an element based on some condition. What it means? Assign the CSS class highlight or apply style (using the highlight class) to the element if emp.name is equal to selectedName.

How to bind the background color of a list in HTML?

We can solve this using *ngFor directive and attribute binding for binding the background colour. Using *ngFor directive iterate through a list of items in .html file. By using attribute binding, bind the background color for every item in the list. By default use an array which consists of false boolean value in .ts file.


1 Answers

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

like image 190
Deep 3015 Avatar answered Sep 26 '22 13:09

Deep 3015