Property Binding in Angular 2

Property Binding in Angular 2

NO TL;DR Required 🙂

Property Binding in Angular 2 Explained

Angular 2 is full of drastic changes from what Angular 1.x developers have come to know. Fortunately the guys over at Google have put a lot of thought into this and all these changes seem to have very intelligent reasons behind them. The first change I want to talk about and probably the most easy to grasp is Property Binding in Angular 2.

Angular 1.x is filled with out of the box directives that manipulate DOM elements. Some of these you may be familiar with are ngDisable, ngShow, ngHide, ngClass, ngChecked, ngHref, and so on…

By including these attribute directives in your DOM element you can bind to those attributes, gather information, and set information accordingly. What the Angular Team at Google has done with Angular 2 is bind to the elements properties rather than the elements attributes.

There are many reasons for making this switch, but the three most important in my opinion are: speed, compatibility with web components, and the reduction of out of the box directive Angular comes with.

A Little About the DOM API

Attributes are how the DOM API sets values for an element. It is important to note that the value for an attribute can only be a string, no numbers, booleans, etc… Events are another DOM API that we should know for Angular 2 Event Binding, but that is another post. Lastly we have Properties and Methods. Properties and Methods are both parts of the DOM Object. Because they are like any other javascript object we are not limited to strings only for values.

Property Binding in Angular 2 and DOM Properties

Let see an example of what this would look like:

1
2
3
4
5
6
//old
<div ng-show="myVar">Hello World</div>
<div ng-hide="myVar">Hello World</div>
//new
<div [hidden]="myVar">Hello World</div>
<div bind-hidden="myVar">Hello World</div>

So rather than use the ngShow or ngHide directives we can bind directly to the hidden property on the element, read more about that specific property here. There are two examples of doing this the new way with either [ ] or bind-.

Welcome to Property Binding in Angular 2!

Keep in mind that Angular 2 is completely built on components, below is an example in both ES5, TypeScript, and ES6 using Property Binding in Angular 2.

ES5 HTML

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <demo></demo>
</body>
</html>

ES5 JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
//app.js
function Demo(){}
Demo.annotations = [
    new angular.ComponentAnnotation({
        selector: "demo"
    }),
    new angular.ViewAnnotation({
        template: '<div [hidden]="true">Hidden</div><div [hidden]="false">Shown</div>'
    })
];
document.addEventListener("DOMContentLoaded", function(){
    angular.bootstrap(Demo);
})

See a working fiddle:

TypeScript HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- index.html -->
<html>
  <head>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
  </head>
  <body>
    <!-- The app component created in app.ts -->
    <demo></demo>
    <script>System.import('app');</script>
  </body>
</html>

TypeScript JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//app.ts
import {Component, View, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'demo'
})
@View({
  template: '<div [hidden]="true">Hidden</div><div [hidden]="false">Shown</div>'
})
// Component controller
class MyAppComponent {}

bootstrap(MyAppComponent);

ES6 HTML

1
2
3
4
5
6
7
8
9
<!-- index.html -->
<html>
  <head>
    <!-- NOTE: Your ES6 will need to be compiled to ES5, you would include your compiled ES5 here -->
  </head>
  <body>
    <demo></demo>
  </body>
</html>

ES6 JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
//app.js
import {Component, View, bootstrap} from "angular2/angular2";

@Component({
  selector : "demo"
})
@View({
  template: "<div [hidden]='true'>Hidden</div><div [hidden]='false'>Shown</div>"
})
class Demo{}

bootstrap(Demo);

Pro Tip: Learning the DOM

Learning about DOM Properties/Methods, Events, and Attributes will help you learn more about how to write better HTML and CSS. I think it is commonly overlooked at the skill required to write truely elegant HTML and CSS. Knowing as much as you can about the browser and DOM will make you a better Front End Engineer. Check out some of these resources.

Mozilla Developer Network
W3 Schools (Don’t knock it before you try it)
CSS Tricks

One thought on “Property Binding in Angular 2

Leave a Reply

Your email address will not be published. Required fields are marked *