Data Binding In Angular 5

In this article, we will go through how we can display data and handling events in Angular.

What is Data Binding?

Data Binding means to bind the View (Html content) with Controller’s (Component’s) field. That is whenever we display dynamic data on a view (HTML) from Component, data binding is used.

We can bind our data in the following ways.

Property Binding

In property binding, we bind a property of a DOM element. For example, we created a component file called “property-binding.component.ts” and an HTML file called “ property-binding.html” inside “app” folder.

Write the below code in “property-binding.component.ts” file,

import { Component } from '@angular/core';

@Component({
  selector: 'property-binding',
  templateUrl:'./property-binding.html' ,
})
export class PropertyBindingComponent {
title='Displaying Data in Angular 5'
  imageUrl='./../assets/sofa.jpg';
  imageHeight='50';
}

Write the below code in the “property-binding.html” file.

<h1>{{title}}</h1>
   <hr>
      <div>
      <h3>Property Binding Example</h3>
      <br><br>
   <img [src]="imageUrl" [height]="imageHeight"/>
</div>

And after that put “property-binding” selector in “app.component.html” file,

<property-binding> </property-binding>

Don’t forget to register our component in app.module.ts file.

In the above example, the “src” and “height” property of an image attribute is bound to our component field's imageUrl and imageHeight.

Output of the above code,

 

Note

In property binding, it works only one way; i.e., Component to the DOM, so, if these fields to the component are changed then Angular will update the DOM, but any changes in the DOM are not reflected back in the component.

Attribute Binding

Attribute binding is used to bind attribute of an element with the field of a component. For example, we create a component file called “attribute-binding.component.ts” and an HTML file called “ attribute-binding.html” inside “app” folder

Write the below code in “attribute-binding.component.ts” file,

import { Component } from '@angular/core';

@Component({
  selector: 'attribute-binding',
  templateUrl:'./attribute-binding.html' ,
})
export class AttributeBindingComponent {
  myColSpan=3;
}

Write the below code in “attribute-binding.html” file,

<div>
    <h3>Attribute Binding Example</h3>
    <table border=1>
        <tr>
            <td [attr.colspan]="myColSpan" align="center">
                Employee's Records
            </td>
        </tr>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Salary</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Atul</td>
            <td>45000</td>
        </tr>
    </table>
</div>

In our example, we want to bind our colspan attribute of td element with “myColSpan” field of a component. Syntax of attribute binding is slightly different from property binding, i.e. here, we need to prefix attribute with “attr.” (attribute). By using this “attr.” Angular knows that we are going to bind an attribute of an element.

If you want to see both property binding and attribute binding in the browser, then put “attribute-binding” selector below the “property-binding” selector in “app.component.html” file,

<property-binding> </property-binding><br>
<attribute-binding></attribute-binding>

Output of the above code:

 

 
Class Binding

Class binding is used when we want to add additional classes to an element based on some condition. Suppose, we want to bind “btn-primary” class of button with the component field, then we use class binding. Let us see with an example, again two files are created -- component file called “class-binding.component.ts” and an HTML file called “class-binding.html” inside “app” folder.

Write the below code in “class-binding.component.ts” file.

import { Component } from '@angular/core';

@Component({
  selector: 'class-binding',
  templateUrl:'./class-binding.html'
})
export class ClassBindingComponent {
  isApplied=false;
}

Write the below code in “class-binding.html” file.

<div>
    <h3>Class Binding Example</h3>
    <button class="btn" [class.btn-primary]="isApplied" >Hello</button>
</div>

In the above example, we implemented class binding with some variation of property binding.

Now, if we want to see all these bindings - property, attribute and class binding - in browser, then put “class-binding” selector below the “attribute-binding” selector in “app.component.html” file.

<property-binding> </property-binding><br>
<attribute-binding></attribute-binding><br>
<class-binding></class-binding>

Output of the above code:

 

Points to remember about class binding:

• Install bootstrap for using the concept of class binding, because in the above example “btn” and “btn-primary” are the classes of bootstrap.
• To install bootstrap, use the following command,

npm install bootstrap --save

•  we use “--save", so that bootstrap can automatically be saved into the package.json file.
• After installing bootstrap, please import “bootstrap.css” in your “style.css” file:

@import "~bootstrap/dist/css/bootstrap.css";

Now, using the above steps to install bootstrap, you can easily used bootstrap's classes in HTML file.

 

Style Binding

We also bind a component field to our inline HTML styles; this is called style binding. It is again a variation of property binding and very similar to class binding. Suppose, if we want to apply some inline style on the basis of some condition, then we use Style binding. Let us see with an example; again I created two files; i.e., component file called “style-binding.component.ts” and an HTML file called “style-binding.html” inside “app” folder

Write the below code in “style-binding.component.ts” file:

import { Component } from '@angular/core';

@Component({
  selector: 'style-binding',
  templateUrl:'./style-binding.html'
})
export class StyleBindingComponent {
  isApplied=true;
}

Write the below code in “style-binding.html” file:

<div>
    <h3>Style Binding Example</h3>
    <button class="btn" [style.backgroundColor]="isApplied?'#337ab7':'red'" >Style</button>
</div>

Now, if we want to see all these bindings; i.e., property, attribute, class and style binding in browser, then put “style-binding” selector below the “class-binding” selector in “app.component.html” file:

<property-binding> </property-binding><br>
<attribute-binding></attribute-binding><br>
<class-binding></class-binding><br>
<style-binding></style-binding>

Output of the above code:

 

 
At last after registering our all components in "app.module.ts" file, our file looks like:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PropertyBindingComponent } from './property-binding.component';
import { AttributeBindingComponent } from './attribute-binding.component';
import { ClassBindingComponent } from './class-binding.component';
import { StyleBindingComponent } from './style-binding.component';



@NgModule({
  declarations: [
    AppComponent,
    PropertyBindingComponent,
    AttributeBindingComponent,
    ClassBindingComponent,
    StyleBindingComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I attached "BindingDataSample", a sample project along with this article. This project contains all the files related to binding, but before running this project install node_modules in this project by using the below command:

npm install

Conclusion

As we know that displaying data and event binding are very important in Angular, after having read this article, we can say that we have the knowledge of the Property, Attribute, Class and Style Bindings.

To learn about Event Binding and Two-Way Binding, please click here.