Angular click event doesn't work in <object> element

Question

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.

Answer 1

The <object> tag was originally designed to embed browser Plug-ins. More in general, it is better to embed a picture with the <img> tag (which is working well with the click event):

<img src="/assets/img/regions_map.svg" (click)="handleRegionClick($event)" />