Property Binding in Angular

Property binding is one-way binding in Angular from the component class to the view template. Property binding is similar to interpolations but there are few differences in the way we bind them to the view.

Property binding is mostly used to assign values to HTML tags, for example we can use property binding to assign the source URL of an image tag, assign values to a textbox etc. Property binding is used in places where we can directly assign the property without any manipulations, interpolations are used in places where we need to append the property values with other text in the template.

Let us understand property binding with a very simple example, we will set a property title in the component and assign it as value to a textbox in the view.

app.component.ts
import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  constructor() { }

  title = 'Angular 6';

}

app.component.html
<div>

  <input type="text" [value]='title'>

</div>

In the component class we set the value of the title property, in the view template we assign the title property to a textbox. The output will be as follows.