CODEWITHSUNDEEP
javascriptangulardomsvg
George Edwards
George Edwards

Reputation: 9229

Click event won't trigger on click?

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

Upvotes: 0

Views: 296

Answers (1)

Boulboulouboule
Boulboulouboule

Reputation: 4207

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 !

Upvotes: 1

Related Questions