Category: Web server/application server/Web services

WHAT IS INTERPOLATION VS PROPERTY BINDING IN ANGULAR

Data binding makes the angular applications development very easy.

Data binding helps to do the data synchronization between the template(view/html) and class(typescript code)

There are 4 types of data binding in Angular and are following,

• Event binding
• Two way data binding
• Interpolation
• Property binding

What is Interpolation?

For interpolation, double curly braces are used in the template as below,

// app.html is the example for interpolation

<p>{{ name }}</p>  

and it stores the variables, then angular checks for the variable and updates the value assigned to the text.

The Typescript app.ts as below to display the name value to app.html.

// app.ts

@Component({
  templateUrl: 'app.html',
  selector: 'app-test',
})
export class AppComponent {
  name = 'Sharath C';
}

What is Property binding?

Property binding helps to set the property of a view element and it uses [] syntax as below

// app.html is the simple for the property binding.

<button [disabled]="buttonIsDisabled"></button>

TypeScript has to be coded as below to pass the property binding to view template. refer the app.ts as example for Typescript passing the property value

// app.ts
@Component({
  templateUrl: 'app.html',
  selector: 'app-test',
})
export class Component {
  buttonIsDisabled = true;
}