Data Binding

Data binding automatically keeps your page up-to-date based on your application’s state. You use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.

Databinding = Communication

Communication between your typescript code (Business Logic) and the template (HTML).

Output data:

String interpolation {{ data }}
Property binding [property]=”data”

React to (User) Events

Event binding (event) = “expression”

Combination of Both: Two-Way Binding

[(ngModel)] = “data”

Property Binding

src/app/app.component.html

<img alt="item" [src]="user.image">

src/app/app.component.ts

itemImageUrl = '../assets/phone.png';

Toggling button functionality

src/app/app.component.html

<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Disabled Button</button>

Because the value of the property isUnchanged is true in the AppComponent, Angular disables the button.

src/app/app.component.ts

isUnchanged = true;

Others

html

<button [disabled]="!allowNewServer">Add Server</button>

allowNewServer = false;

  constructor() {
    setTimeout( ()=> {
      this.allowNewServer = true
    }, 2000);
   }