Best way to register event in Angular

Question

As far as I know, we can use .bind and .on api from jqlite or .addEventListener native api to register event. Many people are using jqlite api to register event since angular 1.x offers that. But what about Angular 2? Does Angular 2 still offers jqlite api, or should we stick with the native api since it is safer that way.

Also, regarding the performance between .on and .addEventListener . Which one is better?

Answer 1

You shouldn't touch the DOM directly in angular2 application. It makes impossible to run your application in WebWorkers or on a server side. Use (event)="someHanlder()" notation instead. See this plunker.

@Component({
    selector: 'some-component',
    // in "template" you can add handlers for child elements events
    template: `
        <button (click)="handleClickChild($event)">here</b>
    `,
    // in "host" you can add handlers for host element events
    host: {
        '(click)': 'handleClickHost($event)'
    }
})
class SomeComponent {
    handleClickHost(event) {
        // some logic
    }
    handleClickChild(event) {
        // some login
    }
}