What is the difference between event binding and property binding?

Question

There are two conditions in an angular 2 architecture: event binding and property binding. What is the difference between the two?

Answer 1

Property Binding -

If you need to pass the value from the parent component to the child component (regardless of whether the value is static or dynamic), we must use property binding , which means that we send the value using the attribute to the component and get there in the parent using the annotation @Input , e.g. property bindings, see here -

 <my-child [myProp]="prop" /> 

Event Binding -

Capturing child event / method from parent component

whenever we need to fire any event on a click or something else from a child component and go to the parent, we must use Event Binding , see here in the example below -

 <my-child [myProp]="prop" (onPropChange)="onPropChange($event)"</strong> /> 

here we have the onPropChange user as an event binding, we can catch and fire this event using EventEmitter.

See here for more details.

• http://errietta.me/blog/angular2-property-event-binding/

Answer 2

Line 1:

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

Line 2:

 Hello {{username}}! 

Let's take a closer look at what's happening here:

• [value]="username" - binds the username of the expression to the value property of the input elements.
• (input)="expression" is a declarative way of binding an expression to an input event of input elements (yes, this is such an event).
• username = $event.target.value is an expression that is fired when an input event is fired.
• $event - Is an expression open in binding events to Angular, which has a payload of events.

Given these observations, it becomes very clear what is happening. We linked the value of the user name expression with the input of the value value (the data falls into the component).