Back our Angular 4 Book on Kickstarter.

Data Binding - Introduction to Angular 2 with JavaScript - Part 2

This is the second in a series about building a simple AngularJS application. If you haven't already, check out part 1.

This post will expand the sample from the previous article to demonstrate binding in an Angular 2 application. This sample will demonstrate how to bind user input to an Angular 2 display. To do that we only need to make a few architecture changes, and then a bunch of changes to the AppComponent.

Architecture Changes

Two architecture changes are needed. First, we need to import the Angular Forms library:


<script src="https://unpkg.com/@angular/forms@2.2.0"></script>

Angular 2 is purposely split up into multiple libraries, so you only have to import the items that you need. Next, tell your module to use the forms library. To do this, modify the imports command on the ngModule:


imports: [ ng.platformBrowser.BrowserModule, ng.forms.FormsModule ],

The imports value is an array, so adding the new import is just a matter of adding it to the end of the array. All this is so we can use the ngModel directive inside our template.

Review the Component

Next, we need to make changes to the AppComponent, which is the main component of the application. This is the component as we left it off:


(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));

This component consists of two parts. The first is the main Component, which includes the component's selector and template. The component's selector is its name and that does not need to change for this article. The component's Class is the JavaScript behind the component. To date the class does nothing.

Change the Class

First, make changes to the Class. Add a helloTo variable inside the constructor:


.Class({
constructor: function() {
this.helloTo = "World"
}
})

The class parallels a controller inside of an AngularJS 1 application.

Change the Template

Next, we need to modify the template inside the component. The selector does not need to change, but we will make a lot of changes to the template. First, change the header to say hello world:


template: '<h1>Hello {{helloTo}}</h1>' +

Angular 2 uses the same view binding syntax as Angular 1 does. The plus at the end of the template is the JavaScript concatenation operator. It means we're going to add more lines. Let's start with an input:


'<input type="text" [value]="helloTo"
(input)="helloTo=$event.target.value" />
<br/>' +

The input is a standard HTML input, with the type of text. The value and the input parameters are both related to Angular. The value is enclosed in square brackets. I interpret this to mean that whenever the helloTo variable changes it will also change the value of the input. This is not bidirectional. The input is surrounded by parenthesis. This is like calling a function. Whenever the input changes, the function will be executed; and the function changes the helloTo variable. The function body is defined in-line; but we could split it out into a separate function inside the component's class.

I couldn't find solid definition for the bracket or parenthesis syntax in relation to the input and AngularJS. But, my interpretation is that the parenthesis always means a method is called; and the brackets always mean a value is set.

Angular 2 also includes a parallel the ngModel directive from Angular 1:


'<input type="text" [(ngModel)]="helloTo" /><br/>'

The ngModel text is enclosed in both brackets and parenthesis. This represents two way binding in Angular 2. Behind the scenes Angular 2 changes the helloTo class variable whenever the input changes; and the text input whenever the helloTo variable changes.

Final Thoughts

Try to run this:

As you type in one of the inputs, you'll see the other input changes as well as the hello header.

Play with the code here.

There are a few other ways you could set up the input to achieve the exact same purpose, but for the purposes of this article I decided to stop at two.

The last section of this series will focus on adding a reset button to the component.

Get our Updated Intro to Angular 2 White Paper

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.