Property Data Binding In Angular

Introduction

 

This article will talk about the property data binding in Angular, with an example. In the last article, I have explained about Interpolation data binding in Angular.

• Interpolation Data Binding in Angular

So, first, read the above article and then, let's start building a demo application for this one.

 

Step 1

 

Open the command prompt from Windows Search or press Windows key +R from the keyboard and type cmd followed by an Enter.

 

Step 2

 

Create a new project in Angular.

 

ng new AngularDemo

 

 

Step 3

 

Open the project in Visual Studio Code and type the following command to open the project.

 

Code .

 

  

Step 4

 

Open the terminal in Visual Studio Code and create a component "employee".

 

ng g c employee

 

 

Step 5

 

Open the employee component in your application and add the following code.

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

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent {

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;
  ProfileImage:string="assets/Images/farhan.png";
}

Step 6

 

Open the employee.component.html in your application and add the following code.

<table class="table table-bordered">
  <tr>
    <td>First Name</td>
    <td>{{firstName}}</td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td>{{lastName}}</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>{{age}}</td>
  </tr>
  <tr>
    <td>Position</td>
    <td>{{position}}</td>
  </tr>
  <tr>
    <td>Office</td>
    <td>{{office}}</td>
  </tr>
  <tr>
    <td>Salary</td>
    <td>{{salary}}</td>
  </tr>
  <tr>
    <td>Profile Image</td>
    <td>
      <img src="{{ProfileImage}} " height="100" width="100">
    </td>
  </tr>
</table>

Step 7

 

Open app.component.html in your application and take the selector name from the employee.component.ts file.

<app-employee></app-employee>

Step 8

 

Open the assets folder under the src folder of the application and create an "images" folder where we can copy and paste an image. 

 

ProfileImage:string="assets/Images/farhan.png";

 

Step 9

 

Run the application by typing the following command.

 

ng serve --open

 

 

Both, the interpolation and the property binding, flow the value in one direction from Component to View template.

 

What is the difference between interpolation and property binding?

 

Interpolation

 

Interpolation is a special type of syntax with double {{}} curly braces which converts into a property binding in an Angular application. In other words, interpolation is a convenient or alternative way of property binding. Angular evaluates all the expressions in double curly braces and converts the expression results into a string.

<img src="{{ProfileImage}} " height="100" width="100">

Property binding

 

In property binding, we use the [] brackets of an element attribute which binds the class property in the Angular application. It is used for passing the data from the component class and setting the value of a given element in the View. Property Binding does not convert the expression result into a string.

<img [src]="ProfileImage " height="100" width="100">

Another example of property binding

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

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent {

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;
  ProfileImage:string="assets/Images/farhan.png";
  CsharpcornerProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";
}


<a [href]="CsharpcornerProfile">My Profile</a>

 

Summary 

In this article, I have tried to explain Angular Property Binding with some examples. I hope this article will help you understand property binding.