Angular For Beginners - Part Three - Data Binding In Angular

This is part 3 of the "Angular for Beginners" series. It is a continuation of the earlier parts mentioned below:

• Part 1 of this series discussed how to get started with Angular.
• Part 2 discussed the basic tenants of Angular- Modules, Components, and Directives.

Part 3 here further builds up the demo code created in earlier parts. So, it is strongly advised that you go through them before proceeding further.

Data Binding in Angular

There are four types of binding in Angular.

Interpolation

We have already used interpolation in our code when we displayed the employee field in our table.

It is denoted as {component.property}} and is used to pass the value from the component to the DOM.

Property Binding

We used property binding in our code when we bound the property of the NgStyle element property to values from our component.ts file.

In property binding, the element HTML property values in DOM are set from the component. The background of the row is set based on the component property value.

Event Binding

The above two types are used to pass values from the component to the DOM. Event binding is used to pass a value from the DOM to the component.

Let’s have a look at it in the code.

We will add a button in our HTML code as below.

Let’s define this function in the component file.