Click event won't trigger on click?

Question

I have the following html ( a template in my angular 5 component ):

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

In my component I have this:

  @ViewChild('svg') svg: ElementRef;

  ngAfterViewInit() {
    this.svg.nativeElement.addEventListener('load', () => { // wait for the svg to load
      console.log('Clicked...')
    }, false);
  }

As expected, this logic works correctly - when the component loads, I get Clicked... logged for every instance of the component in the view.

However, as soon as I change the event from 'load' to 'click', clicking on the svg doesn't fire any event?

Any idea why?

Update:

As noted in the linked question, the following html doesn't trigger the click event either:

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

Here is a plunk demo

@Flow I tried that before and it didn't work... See this [discussion](https://stackoverflow.com/questions/47097506/how-to-add-angular-event-listener-to-svg) — George Edwards, Nov 06 '17 at 10:31
Did you try attaching the click to the `div` and not the `object` ? — callback, Nov 06 '17 at 10:39
1.Do you have any hostlistner or listener on document click in your project? 2. could you provide a demo as it's tightly inked on your setup? — Vega, Nov 06 '17 at 11:04
@Vega 1. No (but I do have a hostlistener for laod event). 2. Here is a minimal [plunk](http://plnkr.co/edit/J5MbTmZKasO7jthSlJAK?p=preview) clicking on the svg should bring about the same "toggle background color" behavior as clicking on any of the other elements. — George Edwards, Nov 06 '17 at 11:10
tag works: http://plnkr.co/edit/XTBueObocotnkzFenFIW?p=preview — Vega, Nov 06 '17 at 11:26
~@Vega Annoyingly, I need to use Object tags, as another part of the component has to interact with elements of the svg — George Edwards, Nov 06 '17 at 11:28
Things apart, click on div works, it's only object that 'ignores' it — Vega, Nov 06 '17 at 11:37
@Vega I was thinking about whether there was some css trick that would make the div sit "on top" of the svg so that event could be picked up - but haven't been able to make that approach work? — George Edwards, Nov 06 '17 at 11:38
Object 'cannot' be clicked : check out this answer and comments: https://stackoverflow.com/a/25916723 — Vega, Nov 06 '17 at 12:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158349/discussion-between-george-edwards-and-vega). — George Edwards, Nov 06 '17 at 19:51

Boulboulouboule · Answer 1 · 2017-11-06T20:52:06.820

1

It's weird that it doesn't work on your project, maybe due to the new angular 5 version.

You can achieve what you want by binding a (click) event directly on the template :

<div class="center">
    <object id="img" data="assets/img/big_layout.svg" (click)="onClick()"></object>
</div>

And by adding the method in your component file :

onClick() {
    console.log('Clicked');
}

EDIT : Object tags are like iframe, they can't be accessed for security purposes !

edited Nov 06 '17 at 20:52

answered Nov 06 '17 at 10:48

Boulboulouboule

4,087
1
13
29

As noted in the linked question, neither having a `(click)` in the object or the div works... – George Edwards Nov 06 '17 at 10:53
Oh sorry, don't see it ! So it's weirder – Boulboulouboule Nov 06 '17 at 10:57
Appart repeating what was in a comment (and in an other post already), this answer is not correct as the edit is against the first part – Vega Nov 06 '17 at 21:35

Click event won't trigger on click?

Update:

1 Answers1