37

I'm newbie to Angular 2. What are the corresponding events from AngularJS to Angular 2? eg: ng-click to (click)

How about ng-init and all others events? I'm not having intellisense in VS .NET, so it's hard to guess.

Any help please!

Thanks

 
improve this question

5 Answers  正确答案

61

The default handled events should be mapped from the original HTML DOM component's events:

默认处理的事件应映射自原始html dom组件的事件：

http://www.w3schools.com/jsref/dom_obj_event.asp

by just removing the on prefix.

相对于只需删除on前缀。

可以看看  https://www.runoob.com/angularjs/angularjs-reference.html

 相对于 angularjs ( angular 1 )  删除 ng- 前缀


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...

improve this answer
8

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()"
improve this answer
6

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

improve this answer
1

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

improve this answer
1

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

enter image description here

In my case the best way to understand the differences between Angular 1 and Angular 2 was doing the tutorials:

improve this answer

来自  https://stackoverflow.com/questions/34928461/angular-2-list-of-events