# Event Binding

## Data Flow : Element to Component

Users don't just stare at the screen. They enter text into input boxes. They pick items from lists. They click buttons.

The only way to know about a user action is to listen for certain events such as keystrokes, mouse movements, clicks, and touches.

Such user actions may result in a flow of data in the opposite direction: **from an element to a component**.

## Event Binding Syntax

Event binding syntax consists of a **target event name** within parentheses `( )` on the left of an `=` sign, and a quoted **template statement** on the right.

```markup
<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>
```

**Element events** may be the more common targets, but Angular looks first to see if the name matches an **event property of a known** [**directive**](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives), as it does in the following example:

```markup
<!-- `myClick` is an event on the custom `ClickDirective` -->
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
```

## $event object

When the event is raised, the handler executes the template statement. The template statement typically involves a receiver, which performs an action in response to the event, such as storing a value from the HTML control into a model.

The shape of the event object is determined by the target event.

* If the target event is a **native DOM element** event, then `$event` is a **DOM event object**, with properties such as `target` and `target.value`. The properties of an `$event` object vary depending on the type of DOM event. For example, a mouse event includes different information than a input box editing event.

```markup
<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >
```

* If the event belongs to a **directive** (recall that components are directives), $event has whatever shape the directive decides to produce.

\[R]

## Customize event

**Directives** typically raise **custom events** with an Angular `EventEmitter`.

The directive creates an EventEmitter and exposes it as a property. The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a **message payload**, which can be anything. Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.

The component defines a deleteRequest property that returns an EventEmitter. When the user clicks delete, the component invokes the delete() method, telling the EventEmitter to emit a Hero object.

```markup
src/app/hero-detail.component.ts

<div>
  <img src="{{heroImageUrl}}">
  <span [style.text-decoration]="lineThrough">
    {{prefix}} {{hero?.name}}
  </span>
  <button (click)="delete()">Delete</button>
</div>`
```

```javascript
src/app/hero-detail.component.ts

deleteRequest = new EventEmitter<Hero>();

delete() {
  this.deleteRequest.emit(this.hero);
}
```

```markup
src/app/app.component.html

<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
```