What exactly $event object do in Angular 2?

by

$event is the event itself.

The event binding (someevent) allows to bind to DOM events and to EventEmitter events. The syntax is exactly the same.

For DOM events $event is the MouseEvent, KeyboardEvent, or the event value of the type of whatever event you listen to.

For EventEmitter events the emitted value is available as $event

Assuming this example $event refers to the emitted Ferrari car instance:

@Output() carChange:EventEmitter<Car> = new EventEmitter<Car>();

someMethod() {
  this.carChange.emit(new Car({name: 'Ferrari'}));
}

If you don’t use $event like in (click)="clicked()" then the event value is not passed.

Actually as far as I remember it is still passed in some browsers but not in all (don’t remember which ones)

But if you use Angulars WebWorker feature, then your method might not get the fired or emitted event if you don’t explicitely list it.

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. Angular 2 custom form input
  3. How to get query params from url in Angular 2?
  4. How to inject Document in service?
  5. Angular 2 Show and Hide an element
  6. WARNING: sanitizing unsafe style value url
  7. Angular 2: Convert Observable to Promise
  8. Angular2: How to load data before rendering the component?
  9. Angular2 – should private variables be accessible in the template?
  10. Extending component decorator with base class decorator
  11. How to prepare release version with SystemJS and Gulp?
  12. Angular2 canActivate() calling async function
  13. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  14. How to display json object using *ngFor
  15. Angular 2 View will not update after variable change in subscribe
  16. Angular no provider for NameService
  17. Angular2 – Share data between components using services
  18. Accessing a property in a parent Component
  19. TypeScript error in Angular2 code: Cannot find name ‘module’
  20. Integrating Material Design Lite with Angular2
  21. Visual Studio Code Automatic Imports
  22. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  23. Get route query params
  24. Angular 2 ngModel in child component updates parent component property
  25. RxJs Array of Observable to Observable of Array
  26. How to implement Custom Async Validator in Angular2/4/5
  27. Import gapi.auth2 in angular 2 typescript
  28. Angular 2 loader on each http request
  29. How to place a dynamic component in a container
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment