Angular Google Maps: Can't click on drawn polygon using polyClick

Hi all,

I’ve recently went into creating a Google Map UI using Angular (version 8.2.1) but I’m facing the issue of not being able to click on my drawn polygon. My goal is simple: I just want to create a simple window alert when I click on the polygon. The following are snippets of relavant codes I have used. 


<!–app.component.html–>

<body>

   <agm-map>

       <agm-polygon (polyClick) = “onPolyClick()”>

       </agm-polygon>

       

       <agm-marker>

       </agm-marker>

   </agm-map>

</body>


// app.component.ts

import { Component, OnInit, ViewChild, ElementRef, NgZone } from ‘@angular/core’; 
import { MapsAPILoader, MouseEvent } from ‘@agm/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})

export class AppComponent implements OnInit {
  

    onPolyClick() {
    window.alert(“Hello world”)
    }

}

Any help is appreciated, thank you.