I'm working on an Interactive map using an SVG map divided in multiple regions, What I'm trying is to catch the clicked element (path element that represents the region) to apply some styling with it.

My angular component has the following template :

<object type="image/svg+xml" data="/assets/img/regions_map.svg" (click)="handleRegionClick($event)"></object>

for the Ts file :

export class RegionsMapComponent implements OnInit {

  constructor() { }
  ngOnInit() {
  }

  /** handle the click on the map*/
  handleRegionCLick($event: MouseEvent) {
    console.log('hello');
  }

}

But here clicking on the map SVG doesn't call my function, so i cannot catch the Id of the clicked region to highlight.