Angular 4 : Data Binding & Its Types

What Is Property Binding?

Before we go any further, watch a tutorial video on property binding –

Property binding in simple term is defined as updating the value of a certain variable in component (model) and displaying it in view (presentation layer).

This is a one-way mechanism such that it allows you to change the value whenever you want but only at the component level.

Let’s implement an example (with code) for further understanding of its working –

1. Open up your editor and create a new component with the following code line –

ng g c databind

As soon as you press ENTER key you will notice a new folder created with the name databind in app folder.

2. Establish the connection with local server by typing

ng serve

Now in the databind folder open up following two files –databind.component.html (presentation layer or view)
databind.component.ts (logic/component layer or model)

3. Open up databind.component.ts file and notice the selector – ‘app-databind’. Now open up the pre-defined file – app.component.html and mention the selector there as a tag –

<div style=”text-align:center”>
<h1>
Welcome to Angular {{ title }}!!
</h1>
</div>
<app-databind></app-databind>

4. Open up databind.component.html file and notice the text in paragraph tag

<p>
Databind works!
</p>

Now open up your localhost on browser (localhost:4200) and notice that the text in paragraph tag is being displayed.

5. Now we have to test what property binding does. In order to do so, again open up databind.component.html file and type in the following code

<br/>
<img src=”https://angular.io/assets/images/logos/angular/angular.svg” height=”200” width=”200”>

Again on the browser you will see the logo of angular. But the data is still not bound.

6. In order to achieve the desired data binding technique (property) update the following code in databind.component.ts file.

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-databind’,
templateUrl: ‘./databind.component.html’,
styleUrls: [‘./databind.component.css’]
})
export class DatabindComponent implements OnInit {
constructor() { }
ngOnInit() {
}
imageDisplay = “https://angular.io/assets/images/logos/angular/angular.svg”;
}

7. Now open up databind.component.html file and update the code as

<br/>
<img src=”{{ imageDisplay }}” height=”200” width=”200”/>

8. As soon as you save the file and view the front end on the browser, you can see the logo being displayed using the property binding technique. Also, there are two other ways (three in total) in which you can achieve property binding for a variable –

<img [src]=”imageDisplay” height=”200” width=”200”/>
<img bind-src=”imageDisplay” height=”200” width=”200”/>

9. Just as we have used property binding with variable, we can also use functions to achieve this binding technique. Update the following code in databind.component.ts file –

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-databind’,
templateUrl: ‘./databind.component.html’,
styleUrls: [‘./databind.component.css’]
})
export class DatabindComponent implements OnInit {
hello = “Say Hello”;
constructor() { }
ngOnInit() {
}
sayHello(){
return this.hello = “Say Hi”;
}
}

This program declares a variable hello with value – Say Hello. Now if the function sayHello is called, it will update the value of variable hello with Say Hi.

10. Update the following code in databind.component.html file to complete property binding process –

<br/>
<input type=”text” value=”{{ sayHello() }}” />

As soon as you save the file you can see an input field generated on the front end with the value Say Hi.

11. Just like we can achieve property binding with variable through 3 different types, similarly we can do the same for functions also –

<input type=”text” [value]=”sayHello()” />
<input type=”text” bind-value=”sayHello()” />

1. Establish the connection with local server and create a new component, named databind with the following code line –

ng g c databind

Now open up following files –
databind.component.html (presentation layer or view)
databind.component.ts (logic/component layer or model)

2. In databind.component.html file type in the following code –

<br/>
<input type=”text” [value]=”Magnet Brains” />

You would see a input box generated on the frontend.

3. Now we have to do the event binding so update the following code in databind.component.html file.

<br/>
<input type=”text” [value]=”Magnet Brains” (click)=”showvalue($event)” />

Notice the brackets ( ) around the javascript function click. This brackets symbolizes the event binding process but since showvalue() function ($event is an object) isn’t defined yet so it is not in working state.

4. In databind.component.ts file write up the following code to define the function showvalue() –

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-databind’,
templateUrl: ‘./databind.component.html’,
styleUrls: [‘./databind.component.css’]
})
export class DatabindComponent implements OnInit {
constructor() { }
ngOnInit() {
}
showvalue(event){
console.log(“event”);
}
}

5. After saving the file, go to the local server (front-end), right click and click on inspect element and then click on CONSOLE tab. After this again click on input box and you would notice events being passed on console tab.

6. So in order to pass values from presentation layer (view) to component you have to update the following code in databind.component.ts file –

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-databind’,
templateUrl: ‘./databind.component.html’,
styleUrls: [‘./databind.component.css’]
})
export class DatabindComponent implements OnInit {
constructor() { }
ngOnInit() {
}
showvalue(event){
console.log(“event.target.value”);
}
}

7. After saving the file, go to the front end and again click on the input box. You will notice that the value Magnet Brains is passed in the console tab. This means that we are able to send value from view to model, hence achieving event binding technique.

8. Similarly you can achieve this with other events too like with keyup javascript function.

<br/>
<input type=”text” [value]=”Magnet Brains” (keyup)=”showvalue($event)”/>

Save it, go to the front end and start typing in input box. You would notice that for every key you press, a different event is invoked in the console tab.

Two-way binding is a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.

Let’s understand its working through a very basic example –

1. Establish the connection with local server and create a new component called databind with the following code line –

ng g c databind

Now open up following 3 files –
databind.component.html (presentation layer or view)
databind.component.ts (logic/component layer or model)

2. In databind.component.html file write up the following code –

<br/>
<br/>
<input type=”text” value=”Magnet Brains” [(ngModel)]=”showvalueinput” />
<br/>
<p>Show Value Of Input Box: {{ showvalueinput }}</p>

Since this is a two way binding we have to use both the brackets i.e. [ ( ) ]. Also ngModel is a directive which is used to bind the data both ways.

3. Since we have used ngModel, we have to define it. So, in app.module.ts pre-defined file (can be found through Explorer tab), type in the following code –

import { BrowserModule } from '@angular/platform-browser';
import { ngModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration.registration.component';
import { MyloginComponent} from './mylogin/mylogin.component';
import { DatabindComponent} from './databind/databind.component';
@ngModule({
declarations: [
AppComponent,
RegistrationComponent,
MyloginComponent,
DatabindComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

4. Now go to the front end and start typing in the input box. You would notice that everything that you write in the input box is being displayed simultaneously, hence achieving the two-way binding technique.

Although we can implement two-way binding through a different process also but since this tutorial blog is all about Angular.JS so we have decided to use the ngModel directive.

Note: For simplicity, we have created the component databind only once and cleared the file content before moving on to the next data binding type.

Conclusion

The blog describes you the basics of what data binding is and its type i.e. property binding, event binding and two-way binding.

In case you missed our previous tutorial blogs, you can definitely visit them for a quick recap –

• Integrating Bootstrap In Angular.JS.
• Automatic Component Creation.
• Manual or Custom Component Creation.