what is the difference between event binding and property binding?

Question

In the architecture of angular 2 there are two terms Event binding and Property binding. What is the difference between them?

Answer 1

Line 1:

input [value]="username" (input)="username = $event.target.value"

Line 2:

Hello {{username}}!

Let’s take a closer look at what’s going on here:

• [value]=”username” - Binds the expression username to the input element’s value property.
• (input)=”expression” - Is a declarative way of binding an expression to the input element’s input event (yes there’s such event).
• username = $event.target.value - The expression that gets executed when the input event is fired.
• $event - Is an expression exposed in event bindings by Angular, which has the value of the event’s payload.

Considering these observations, it becomes very clear what’s happening. We’re binding the value of the username expression to the input’s value property (data goes into the component).