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”
|
=”expression”
|
|
Disable an element (ie Button)
|
ng-disabled = “expression”
|
=”expression”
|
|
Set href for an anchor tag
|
ng-href = “expression”
|
=”expression”
|
|
Set src for an image tag
|
ng-src = “expression”
|
= “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:
