Angular 2 - List of events
The default handled events should be mapped from the original HTML DOM component's events:
http://www.w3schools.com/jsref/dom_obj_event.asp
by just removing the on
prefix.
onclick
---> (click)
onkeypress
---> (keypress)
etc...
You can also create your custom events.
However ngInit
is not an HTML event, this is part of the Angular's Component lifecycle, and in Angular 2 they are handled using "hooks", which are basically specific method names inside your component that will be called whenever the component enters the specific cycle. Like:
ngOnInit
ngOnDestroy
etc...
Here is the list of events in Angular Please check in the documentation if required for more info
(focus)="myMethod()"
(blur)="myMethod()"
(submit)="myMethod()"
(scroll)="myMethod()"
(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"
(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"
(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"
(click)="myMethod()"
(dblclick)="myMethod()"
(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"
This is one of the big advantages of Angular2. Not every event needs a customized ng-xxx
directive anymore.
With custom elements and all other libraries producing all kinds of custom events, this approach doesn't fly.
In Angular2 the (eventName)="expression"
binding syntax allows to subscribe to any known and unknown event.
The $event
variable is still available (eventName)="myEventHandler($event)"
See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
A great place to begin to understand Angular 2 is the official Web Page.
Here you can see all the angular2/common ng-XXX although now it is as follows ngXxxx
In my case the best way to understand the differences between Angular 1 and Angular 2 was doing the tutorials:
- Tour of Heroes
- The Developer Guide: this is a practical guide to Angular for experienced programmers who are building client applications in HTML and JavaScript.
You can use the following syntax to handle events (for example click
like ng-click
with Angular1):
<button (click)="callSomeMethodOfTheComponent()">Click</button>
The difference here is that this is more generic. I mean you can use DOM events directly but also custom ones defined using the EventEmitter
class.
Here is a sample that describes how to handle a click
event and a custom event (my-event
) trigged by a sub component:
@Component({
selector: 'my-selector',
template: `
<div>
<button (click)="callSomeMethodOfTheComponent()">Click</button>
<sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
</div>
`,
directives: [SubComponent]
})
export class MyComponent {
callSomeMethodOfTheComponent() {
console.log('callSomeMethodOfTheComponent called');
}
}
@Component({
selector: 'sub-component',
template: `
<div>
<button (click)="myEvent.emit()">Click (from sub component)</button>
</div>
`
})
export class SubComponent {
@Output()
myEvent: EventEmitter;
constructor() {
this.myEvent = new EventEmitter();
}
}
Hope it helps you, Thierry