There are two types of data binding we can do in Angular, namely, one-way and two-way. Interpolation is very similar to one-way data binding. This is because, in both cases, data flows from the component class to the component template and not the other way around. Property binding is data binding in the sense that the data is being bound to a property.

It's also possible to have two-way property binding—meaning, not only can the value of a component property be bound to the template, but the template can alter the value of a component property. This is made possible in Angular by ngModel. Again, don't worry about this for now. We will take a look at two-way property binding later on. Just know that both one-way and two-way property binding is possible in Angular.

Implementing one-way property binding is very straightforward. All you need to do is to put square brackets around the HTML property (in the component's template) you want the data bound to, and assign the variable to it. To see a quick example of what one-way property binding looks like in code, take a look at the next three screenshots.

The first screenshot is of the component file (home.component.ts); the variable, txtPlaceholder, is declared on line 11:

This next screenshot is of the component's template file (home.component.html). In line 14, you can see the square brackets around the placeholder property of the input element:

This last screenshot is of the application running in the browser. You can see the text, Enter your todo item here, inserted as the placeholder text for the textbox via one-way property binding: