Как включить клик по svg-строке в angular2?

Question

У меня есть линия, проведенная через SVG, и мне нужно отловить событие click на нем. Однако, когда я устанавливаю функцию onclick, я получаю сообщение об ошибке.

 <div id ="middle" class="col-lg-2 col-xs-3">
      <svg width="300" height="2000" xmlns="http://www.w3.org/2000/svg">
             <line id="line2"   [attr.x1]= "from_x0" [attr.y1] ="from_y0"  [attr.x2]="to_x" [attr.y2]="to_y" stroke-width="2" stroke="green" onclick ="OnClick()"//>
     </svg>
</div>

Я получаю ошибку

Uncaught ReferenceError: OnClick не определен в SVGLineElement.onclick (:3000/#/app/tables/tablelist/tableedit/1:1)

Моя функция OnClick ниже

OnClick (){
  console.log('clicked on line')
}

Был бы признателен за любые указатели, чтобы решить эту проблему.

Answer 1

Угловая привязка события (event)="..."

<line id="line2"   [attr.x1]= "from_x0" [attr.y1] ="from_y0"  [attr.x2]="to_x" [attr.y2]="to_y" stroke-width="2" stroke="green" 
       (click)="OnClick()"/>