CODEWITHSUNDEEP
angulartypescriptsvg
Alif Jamaluddin
Alif Jamaluddin

Reputation: 518

Add onclick event on svg rect using Angular Renderer2

Is there any ways to add onclick event on svg rect.

I have tried using Angular Renderer2, 

constructor(public renderer: Renderer2){
    const rect = document.createElementNS( 'http://www.w3.org/2000/svg' , 'rect' );
    this.renderer.setAttribute(rect, 'onclick', 'callRect()');
}

callRect(){
console.log("Rect clicked");
}

But I got an error

(index):1 Uncaught ReferenceError: callRect is not defined
at SVGRectElement.onclick ((index):1)

Upvotes: 4

Views: 1601

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Inspite of using setAttribute, use listen method over Renderer by which you can call component methods directly inside eventHandler

this.renderer.listen(rect, 'click', (evt) => {
  this.callRect();
  console.log('Clicking the rect', evt);
});

Upvotes: 11

Related Questions