Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Angular 5 Interpolation, Property Binding & Event Binding Tutorial

By Gary simon - Nov 03, 2017

Ready to build Awesome Angular Apps?

A Free Course, Free Tutorials and Full App Development Courses!

Great! Check your email

I've just sent you the first email to get you started.

The following tutorial is a part of our 100% free course Learn Angular 5 from Scratch - Angular 5 Tutorial

In the previous lesson, we defined a template along with some Sass (SCSS) styling. In order to make our project more dynamic, we can utilize interpolation, property and event binding.

Interpolation allows you to define properties in a component class, and communicate these properties to and from the template.

Property binding is the same thing as interpolation, except you can set the properties and attributes of various HTML elements.

Event binding allows you to define events that occur in the template (user-initiated), and communicate to the component class. 

We'll take a look at each of these in this lesson.

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

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:

<!-- From: -->
<p>Your bucket list</p>

<!-- To: -->
<p>Your bucket list ({{ itemCount }})</p>

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:

<!-- From: -->
<input type="submit" class="btn" value="Add Item">

<!-- To: -->
<input type="submit" class="btn" [value]="btnText">

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:

<!-- Interpolation -->
<input type="submit" class="btn" value="{{ btnText }}">

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:

<!-- From: -->
<input type="text" class="txt" name="item" placeholder="Life goal..">

<!-- To: -->
<input type="text" class="txt" name="item" placeholder="Life goal.." [(ngModel)]="goalText">

<br><span>{{ goalText }}</span><br>

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 <br><span> 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:

<!-- From: -->
<input type="submit" class="btn" value="{{ btnText }}">

<!-- To: -->
<input type="submit" class="btn" value="{{ btnText }}" (click)="addItem()">

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:

<!-- From: -->
<p class="life-container">I want to climb a mountain</p>

<!-- To: -->
<p class="life-container" *ngFor="let goal of goals">
  {{ goal }}
</p>

Now, go ahead and add a few items and the result should look like this:

Going Forward

Great! You should now have a beginner's understanding of interpolation, property binding and event binding.

In the next lesson, we're going to take a look at Animation in Angular 5.


Share this post




Say something about this awesome post!