How to make this jQuery event handler in Angular 2?

Question

I am creating a web application in Angular 2. On one of the pages, I use a jQuery plugin called jquery-comments, to enable user comments.

Now I'd like to show a custom dialog box, if the user clicks the jquery-comments "Reply" button.

If it was jQuery, I would do something like:

$('.jquery-comments .reply').on('click', function (event) {
    event.preventDefault();
    ...here I can show my custom dialog box or something else        
});

But how would I make a similar event handler in Angular 2, without changing the jquery-comments plugin?

Answer 1

In your angular component you should reference a DOM element from the template using @ViewChild() After the view has been initialized you can use the nativeElement property of this object and pass to jQuery.

Declaring $ (or jQuery) as JQueryStatic will give you a typed reference to jQuery.

reference: https://stackoverflow.com/a/30662773/510788

You can catch the click after injecting jQuery into your component.

Answer 2

You can attach an event handler click with Angular like so...

Some Component HTML

<div class="reply" (click)="showComments($event)"></div>

Passing $event will give you the same event object that you would get by just passing event with vanilla js.

Some Component

    class someComponent {

      constructor() {
    }

    showComments(e) {
      e.preventDefault();
      // do the jquery stuff here.
    }

    }