Angular 8 Session 9 - Property Binding In Angular

Property Binding

Property Binding is one form of data-binding in angular like interpolation we discussed in our last session and deals with element properties.

Property Binding works with a pair of [] having element property aligned with in it.

An input value can be set using property binding as below.

It also can be used with method.

Property binding also works in one-direction like Interpolation.

How Property Binding Differs with Interpolation

Angular internally converts Interpolation format to Property Binding, Interpolation is just an alternate way to render data.

If there might be a case if you need to append context to an existing then Interpolation takes responsibility over property binding.

When we are dealing with a non-string value then we must have to use property binding instead interpolation else the behavior will be unexpected.

app.component.ts

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

@Component({

  selector: 'my-app',

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

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

})

export class AppComponent {

  myData = "angular";

  imgName = 'angular.svg';

  isEnabled = false;

}

app.component2.html

<div>

    <input type="text" [value]="myData" />

    <br />

    <img src='https://angular.io/assets/images/logos/angular/{{imgName}}' height="200px" width="200px" />

    <button [disabled]='isEnabled'>Click me</button>

</div>