0

I have the following template for my angular component:

<div class="center">
    <object id="img" data="assets/img/big_layout.svg" #svg></object>
</div>

I would like to trigger an angular event when the svg is clicked. I tried adding (click)="onSelect($event)" to the <object> but that didn't work. Is it possible to get the object with Renderer2, and then attach an event listener in the component?

George Edwards
  • 8,979
  • 20
  • 78
  • 161
  • There is no way to do that when SVG is added this way (also doesn't work with dynamically added HTML). You can query the SVG `querySelector(...)` and use `addEventHandler()` like with plain JS – Günter Zöchbauer Nov 03 '17 at 13:58
  • Could you wrap the object in a div and attach the listener to that div? Assuming the click event will bubble up to the div – LLai Nov 03 '17 at 13:59
  • @LLai I tried this, but it didn't work - not sure if there are some css properties required to make this work? – George Edwards Nov 03 '17 at 14:05
  • @GeorgeEdwards try adding `pointer-events: none` to the object element – LLai Nov 03 '17 at 14:16

0 Answers0