A Hands-on Guide to Angular/

...

/

Binding the Data

Binding the Data

In this lesson, we will go through the concept of data binding in Angular. It is one of the most important features of the Angular framework as data pushing and pulling always performs a key role in the development of any web-based application.

We'll cover the following...

In this lesson, we will learn the concept of binding the data onto the template of a component. You now know what components are and about the following 4 files that are generated when a component is created:

  • TypeScript class file
  • HTML file
  • Styling file (CSS/SCSS/LESS)
  • Spec File (Unit tests)

In the TypeScript code of our component, we would have some data that is supposed to be displayed on the view. This is known as binding the data from the component class to the component template.

There are different ways of binding the data that is either defined locally in your component or is received as a response from an API.

Data Binding techniques

In this section, we will look at the following data binding techniques along with examples.

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

Let us discuss each of these one by one and with examples.

Interpolation

Interpolation is used to bind the value of a variable defined in the component class to a UI element. To interpolate a piece of data, simply put the elements inside ...