Angular 5 Interpolation, Property Binding & Event Binding Tutorial

Interpolation
Whenever you need to communicate properties (variables, objects, arrays, etc..) from the component class to the template, you can use interpolation.

The format for defining interpolation in a template is: {{ propertyName }}

Open up the /src/app/home/home.component.ts component file that we’ve been working on and define the following property and value:

export class HomeComponent implements OnInit {

itemCount: number = 4;

constructor() { }

ngOnInit() {
}

}
Then, in /home.component.html update the following:

Your bucket list

Your bucket list ({{ itemCount }})

If you save the project, you’ll notice in the browser that we’ve used interpolation {{ }} to show the itemCount property in the browser.

Of course, this itemCount property is not yet dynamic, but it will be shortly.

Property Binding
Let’s say for some reason, that we want to use the component class to control the value of our Add Item button text. We can do this through property binding.

Open /home.component.ts and add the following property:

itemCount: number = 4;
btnText: string = ‘Add an Item’; // Add this line
Then, open /home.component.html and set the value property through property binding, to our btnText property:




Save, and you will see the new button value as defined in our component class. Simple enough!

Note: You can also define property binding through interpolation:



Property binding in Angular 5 is one-way, in that communication goes from the component class to the template.

Two-Way Data Binding
What if we wanted to use our input textfield to both retrieve and set its value from a component class? We can use what’s called ngModel to create that 2-way data binding.

First, we have to import the FormsModule in order to have access to ngModule.

Open up /src/app/app.module.ts and at the top within the imports, paste:

import { FormsModule } from ‘@angular/forms’;

// Other imports removed for brevity

@NgModule({

imports: [
BrowserModule,
AppRoutingModule,
FormsModule // Add the FormsModule here
],
Save this file.

Revisit /home.component.ts and add a third property:

itemCount: number = 4;
btnText: string = ‘Add an Item’;
goalText: string = ‘My first life goal’; // Add this
In the template file, add this to create a 2-way data binding:



{{ goalText }}
If you reload, you will find that the component has communicated the default value of goalText to both the input and the span.

Try changing the value of the input, and you will notice that goalText becomes updated from the template to the component, which is demonstrated by the span element that we added.

You can go ahead and remove the
line, that was just for demonstration purposes.

That, in a nutshell is how 2-way data binding works.

Event Binding
Now that we know how to capture user input, how can we make our Add an Item button actually work and save the user-submitted data somewhere?

That’s where event binding comes in. We can use event binding to capture a variety of user-initiated events to initiate logic in our component class. Angular 5 supports many events listed here.

Let’s define a click event on our Add an Item button:




Note: We’re not even passing in the value of the input field, because we’ve set it up to work with 2-way data binding.

In the component class, let’s create the addItem() method and also make some other adjustments:

export class HomeComponent implements OnInit {

itemCount: number = 4;
btnText: string = ‘Add an Item’;
goalText: string = ‘My first life goal’;
goals = [];

constructor() { }

ngOnInit() {
this.itemCount = this.goals.length;
}

addItem() {
this.goals.push(this.goalText);
this.goalText = ”;
this.itemCount = this.goals.length;
}

}
At the top, we’ve added a new array called goals; This is where we will store the user entries. This, of course, is not being persisted in a database.

Then, in the ngOnInit() lifecycle hook, which fires once when the component is loaded, we are setting the itemCount to the length (or number) of goals in the goal array.

In our new method, we use javascript to push the current goalText to the array, then, reset the goalText value which clears out our input field, and then reset the itemCount.

If you save the project and now use it, you will see the result in the browser. The Your Bucket List (#) will increase each time you add a new bucket list item.

Using ngFor to Display our Array
In our template, we want to show all of the current bucket list items to the right of the layout.

Open up the template and change the following:

I want to climb a mountain

{{ goal }}

Add a Comment

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