How to use mouseover in <agm-map> angular 4

Issue

I am using AgmMap for maps in angular 4 application. how to implement the mouseover event in agm-marker which shows info-window. I need to open info window on marker mouse hover. How can I retreive the infowindow instance in my function onMouseOver to open it? This is my map.component.html file

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker *ngFor="let m of markers; let i = index"
          [latitude]="m.lat"
          [longitude]="m.lng"
          (markerClick)="clickedMarker(m, i)"
          [iconUrl]="m.iconUrl">
          <agm-info-window>{{m.label}}</agm-info-window>
  </agm-marker>
</agm-map>

and map.component.ts file

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../_services/index';
import { Ng4DropdownModule } from 'ng4-material-dropdown';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
   moduleId: module.id,
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {
   title: string = 'My first AGM project';  
  lat: number = 51.673858;
  lng: number = 7.815982;

  ngOnInit() {
  }

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'Map A',
          draggable: true,
          iconUrl:'http://maps.google.com/mapfiles/ms/icons/green.png'
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'Map B',
          draggable: false,
          iconUrl:'http://maps.google.com/mapfiles/ms/icons/red.png'
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'Map C',
          draggable: true,
          iconUrl:'http://maps.google.com/mapfiles/ms/icons/yellow.png'
      }
  ];

  constructor() {
   }

   clickedMarker(marker:marker, index:number)
   {
    console.log('Clicked Marker:'+ marker.label+' at index'+index);
   }


}
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
    iconUrl?: string;
}

Can you please help me. how to implement the mouseover event in AgmMap ?

Solution

You can use (mouseOver)="mouseOver($event)"

<agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m,i)" [latitude]="m.lati" [longitude]="m.longi"
 (mouseOver)="mouseOver($event)">
</agm-marker>

Answered By - Sajeetharan