Home  > Resources  > Blog

Angular 2 Property and Event Bindings

December 2, 2016 by Mark Pawlowski
Category: Angular
Have you noticed that many of the directives built-in to AngularJS are missing in Angular 2.0? Well there two reasons for that; “property bindings” and “event bindings”. The various binding types in Angular 2 remove the need for many of the directives built into the prior version of the framework.
Here are a few examples of Angular 2.0 property bindings:
AngularJS Directive
Angular 2 Property Binding
Hide/unhide an element
ng-hide = “expression”
Disable an element (ie Button)
ng-disabled = “expression”
Set href for an anchor tag
ng-href = “expression”
Set src for an image tag
ng-src = “expression”
= “expression”
Here “expression” can take a number of forms:
Example Expression
Refers to:
A component property named myVariable
“2 + 2”,
“myVar * 3”,
An expression that will be evaluated by Angular
A call to a method in the component
In addition to property bindings Angular 2 includes event binding syntax which also replaces various AngularJS directives. Here are some examples:
AngularJS Directive
Angular 2 Property Binding
Bind code to a click event
ng-click = “expression”
(click) = “expression”
Bind code to input keyup event
ng-keyup = “expression”
(keyup) = “expression”
Bind code to mouseover event
ng-mouseover = “expression”
(mouseover) = “expression”
Bind code to submit event
ng-submit = “expression”
(submit) = “expression”
Here an “expression” is typically either an angular expression or a component method call.
The addition of property and event binding syntax in Angular 2 opens up binding to all DOM properties and events and dramatically reduces the number of built-in directives the Angular development team needs to maintain.
For more information on property binding see:
For more information on event binding see:

Follow Us

Blog Categories