Property Binding in Angular 8

Property Binding is also a one-way data binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually Angular internally converts string interpolation into property binding.

For example:

<img [src]="imgUrl" />

Property binding is preferred over string interpolation because it has shorter and cleaner code String interpolation should be used when you want to simply display some dynamic data from a component on the view between headings like h1, h2, p etc.

Note: String Interpolation and Property binding both are one-way binding. Means, if field value in the component changes, Angular will automatically update the DOM. But any changes in the DOM will not be reflected back in the component.

Property Binding Example

Open app.componnt.ts file and add the following code:

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

@Component({    

  selector: 'app-root',    

  templateUrl: './app.component.html',    

  styleUrls: ['./app.component.css']    

})    

export class AppComponent {    

  title = "Data binding using Property Binding";      

  imgUrl="https://static.javatpoint.com/tutorial/angular7/images/angular-7-logo.png";    

} 

Now, open app.component.html and use the following code for property binding:

<h2>{{ title }}</h2> <!-- String Interpolation -->    

<img [src]="imgUrl" /> <!-- Property Binding -->  

Run the ng serve command and open local host to see the result.

Output: