Difference between interpolation and property binding – Angular 4 Data Binding

When to use Interpolation in Angular?

This is one-way data binding between script (.ts) and HTML

This will only use you want to bind the “string” value.

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

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2> 
    `,
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
  public name = "John"; 
  constructor() { } 
  ngOnInit() {
  } 
}

When to use Property binding ?

To set an element property to a non-string data value, you must use property binding.

it is applied to the DOM using brackets ” [ ] ” in the below example “isDisabled” is bind to the button disabled property. if we use interpolation. the disabled property can’t be changed after the DOM is created.

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

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
  <input   type="button" value="button"  [disabled]="isDisabled"/>
  `,
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  public name = "John"; 
  public isDisabled = true; 
  constructor() { } 
  ngOnInit() {
  } 
}

You can also use “bind-” word to bind property.

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

@Component({
  selector: 'app-test',
  template: `
  <h2> Welcome {{name}} </h2>
  <input   type="button" value="button"  bind-disabled="isDisabled"/>
  `,
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  public name = "John"; 
  public isDisabled = true; 
  constructor() { } 
  ngOnInit() {
  } 
}