Angular 2: how to implement image map area

Question

I am trying to implement image map area in Angular 2, as the example (in Angular JS) http://plnkr.co/edit/5bfNEQxqPfzZxuBJOSWm?p=preview

What I have done:

product.component.html

<div class="row“>
  <div id="image_map"> 
    <map name="map_example"> 
      <area shape="poly" coords="0.847,0.885, 1.133,0.669, 1.451,1.085, 1.176,1.225" ng-click="selectPart(546)"> 
      <area shape="poly" coords="1.171,0.604, 1.548,0.416, 1.813,0.988, 1.511,1.052" ng-click="selectPart(547)"> 
    </map> 
    <img src="../../../assets/images/map_product_1_part.png" alt="image map example" width=557 height=441 usemap="#map_example"> 
  </div> 
</div>

product.component.ts

…
selectPart(part: number)
{
     console.log("click on" + part);
}

Result: image areas are not detected or clickable.

I know code and logic should be different in Angular 2, but I am quite new with this, any suggestion is very appreciated.

Answer 1

There is no ng-click attribute in angular2.

use (click) or on-click instead

Plunker Example