Angular 2 Property and Event Bindings


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:
Usage
AngularJS Directive
Angular 2 Property Binding
Hide/unhide an element
ng-hide = “expression”
[hidden]=”expression”
Disable an element (ie Button)
ng-disabled = “expression”
[disabled]=”expression”
Set href for an anchor tag
ng-href = “expression”
[href]=”expression”
Set src for an image tag
ng-src = “expression”
[src]= “expression”
Here “expression” can take a number of forms:
Example Expression
Refers to:
“myVariable”
A component property named myVariable
“true”,
“2 + 2”,
“myVar * 3”,
“http://{{url}}”
An expression that will be evaluated by Angular
“getValue()”,
“myMethod()”
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:
Usage
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:
  1. No comments yet.
(will not be published)

*