Under my Angular App, I'm using some 3rd library widget which is rendering in my ponent.

My template is:

<div>
  <myWidGet></myWidGet>
</div>

Inside myWidGet there some button element that I want handle their events. The button have those classes : .dx-edit-row .dx-mand-edit .dx-link-save

so i i do that :

export class myClass AfterViewInit { 

  constructor(private elRef: ElementRef){}

  ngAfterViewInit() {
    this.elRef.nativeElement.querySelector('.dx-edit-row .dx-mand-edit .dx- 
link-save').on('click', (e) => {
      alert('test');
    });
  }

}

My purpose is to get reference to my button and handle the click event from it.

Suggestions?

Under my Angular App, I'm using some 3rd library widget which is rendering in my ponent.

My template is:

<div>
  <myWidGet></myWidGet>
</div>

Inside myWidGet there some button element that I want handle their events. The button have those classes : .dx-edit-row .dx-mand-edit .dx-link-save

so i i do that :

export class myClass AfterViewInit { 

  constructor(private elRef: ElementRef){}

  ngAfterViewInit() {
    this.elRef.nativeElement.querySelector('.dx-edit-row .dx-mand-edit .dx- 
link-save').on('click', (e) => {
      alert('test');
    });
  }

}

My purpose is to get reference to my button and handle the click event from it.

Suggestions?

• javascript
• angular
• angular5
• angular6
• angular2-template

• 1 I think Im abit confused. why would you use native JS queryselector inside angular? you cant get any interaction with those buttons? – Talg123 Commented Oct 6, 2018 at 16:22
• Maybe get myWidGet with ViewChild and try getting button with querySelector. Although, this way of doing things is not "Angular" way, that button should emit an Output event... – miselking Commented Oct 6, 2018 at 16:37
• You could set a click event handler on the div and check the classes of the event.target to determine if the widget button was clicked (assuming that the click event propagation was not stopped). – Martin Parenteau Commented Oct 6, 2018 at 17:06
• See this stackblitz for an example of event delegation, as suggested in my previous ment. – Martin Parenteau Commented Oct 6, 2018 at 17:18

3 Answers 3

Normally the 3rd party widget should provide a click handler like so:

<myWidGet (click)="myFunction($event)"></myWidGet>

and in the controller:

myFunction(evt) {
  const target = evt.target
  console.log('test')
}

However, if they do not expose click handlers then I would seriously consider not using the widget.

If want to use the widget anyway then do this using jQuery:

ngAfterViewInit() {
  $('.dx-edit-row.dx-mand-edit.dx-link-save').on('click', (evt) => {
    const target = evt.target
    console.log('test')
  });
}

The above assumes ALL these classes are present on the same button.

Or just use vanilla JS.

If the buttons are not available on ngAfterViewInit() then you could do this:

ngAfterViewInit() {
  const interval = setInterval(() => {
    const button = $('.dx-edit-row.dx-mand-edit.dx-link-save')
    // if button is ready
    if (button) {
      // add click handlers
      button.on('click', (evt) => {
        const target = evt.target
        console.log('test')
      });
      // stop polling
      clearInterval(interval)
    }
  }, 100)
}

Accessing DOM elements using jQuery is not really a good practice. Use ElementRef with Renderer2 instead. Also, there's nothing like ngOnViewInit in Angular. It's ngAfterViewInit.

Once the View loads, inside the ngAfterViewInit, you can get access to the HTMLElement using the nativeElement on ElementRef instance. You should explicitly typecast it into HTMLElement so as to get intellisence.

You can then call querySelector on it and pass it the classes. This will give you the button element.

Now you use Renderer2's instances' listen method. This takes three args:

1. The element you want to listen to events on(btnElement).
2. The Name of the event(click).
3. The callback function.

This would translate to code like:

constructor(
  private el: ElementRef,
  private renderer: Renderer2
) {}

ngAfterViewInit() {
  const btnElement = (<HTMLElement>this.el.nativeElement)
    .querySelector('.dx-edit-row.dx-mand-edit.dx-link-save');

  this.renderer.listen(btnElement, 'click', () => {
    alert('Buton was clicked');
  });
}

Here's a Working StackBlitz for your ref.

You can customize the third party widget using Angular Directive. It will allow to access DOM element and attach listeners using renderer2.

<myWidGet customEvents></myWidGet>

Directive:

@Directive({
   selector: '[customEvents]'
})
export class CustomEventsDirective implements OnInit {
    private element: any;
    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.element = el.nativeElement;
    }
    ngOnInit() {

       const btnElement = this.element.querySelector('.dx-edit-row.dx-mand-edit.dx-link-save');

       this.renderer.listen(btnElement, 'click', () => {
         alert('Buton was clicked');
       });
    }
}