One- and Two-Way Data-Binding in Angular

The most current version as of .

One-way data-binding

One-way data-binding is, when informations flows only in one direction. In Angular this refers to data, which is flowing from your component class to your .html-template and vice versa.

In the below example you see how data flows from the component class to the html template in only one direction.

.component.ts

name: string = "David";

.component.html

<h1>My name is {{name}}.</h1>

Two-way data-binding

In two-way data-binding informations flows in two directions. So every time you update a model field of the component from the template, data will be updated in all instances of that property through two-way data-binding.

To use two-way data-binding in you Angular model you use the [()]-syntax, where [] binds the attribute of the given element, while () binds the event to it.

.component.html

<h1>My name is {{name}}.</h1>
<p>
  <label for="name"> Name </label>
  <input type="text" name="name" [(ngModel)]="name" />
</p>

Changes made in the <input>-field of the above examples will instantly be changed in the <h1>, because data-flows in both directions here, from the view to the source of the component and backwards.

For more details on data-binding check out the docs.

— David Wolf