Angular Data Binding: Synchronizing Pages with Application State

Data binding in Angular is a mechanism that allows the component to update the view automatically when the data in the component changes, and vice versa. This mechanism makes it easy to synchronize the component’s data with the view, without writing additional code to update the view manually.

Angular provides three categories of data binding according to the direction of data flow:

1. One-way data binding
2. Event binding
3. Two-way data binding

One-way data binding

One-way binding is used to update the view when the data in the component changes. The view is updated when the data changes, but changes in the view do not affect the data.

One-way data binding is achieved using square brackets [] in the HTML template. For example, you can bind the value of a component property to the textContent property of a label using the following syntax:

<p [textContent]="textContentValue"></p>

The component class would look like the following

export class AppComponent {
  textContentValue = 'Welcome to Angular App';
}

You can also bind data in one directional way from the Component to the View using interpolation. Interpolation is a technique in Angular that allows you to display the value of a component property in the template by surrounding it with double curly braces {{}}. It is a way of one-way data binding where the component updates the view automatically when the data in the component changes.

As an example I will add an additional property in the component

export class AppComponent {
  textContentValue = 'Welcome to Angular App';
  blogLink = "www.dotnethow.net";
}

and also update the html component

<p [textContent]="textContentValue"></p>
<small>{{ blogLink }}</small>

The result would be like below

Event binding

Event binding is a technique in Angular that allows you to bind an event in the HTML template to a method in the component class. This allows you to run a method in the component class when the user interacts with the view, for example, when a button is clicked or when a form is submitted.

Event binding is achieved using the (event) notation in the HTML template. You need to define the (event) in HTML and assign a function which is then defined in the component.

<p [textContent]="textContentValue"></p>
<small>{{ blogLink }}</small>
<hr />
<button (click)="showWelcomeMessage()">Show welcome message</button>

In here I have added a new button element and used (click) notion to add a method/function to the click event. When the user clicks this button, showWelcomeMessage() function will be called.

export class AppComponent {
  textContentValue = 'Welcome to Angular App';
  blogLink = 'www.dotnethow.net';

  showWelcomeMessage(){
    alert("Welcome to this blog post");
  }
}

UI now looks like below

When you click the button, you will get an alert with the message “Welcome to this blog post”.

Two-way data binding

Two-way data binding is a technique in Angular that allows both the component and the view to update each other automatically when the data changes.

This is achieved by combining property binding (is a one-way data-binding technique) and event binding. Property binding allows the component to update the view when the data in the component changes and event binding allows the view to update the component when the user interacts with the view.

Two-way data binding is achieved using the [(ngModel)] directive in the HTML template.

I will update the Html template to look like below:

<p [textContent]="textContentValue"></p>
<small>{{ blogLink }}</small>
<hr />
<button (click)="showWelcomeMessage()">Show welcome message</button>
<hr />
<p>Enter your name below:</p>
<input [(ngModel)]="yourFullName" />
<p>Welcome {{ yourFullName }}</p>

The input element is bound to a property called “yourFullName” in the component class using the [(ngModel)] directive. This directive allows the component to update the view when the data in the component changes, and also allows the user to update the data in the component by modifying the value in the input element.
The last line is a simple text that contains an expression that is bound to the “yourFullName” property, which is wrapped in double curly braces ( {{ }} ). This is called another example of interpolation, and it is used to display the value of a property in the view.

Now, you need to also add a property named yourFullName in the component class which will be used for the two-way data binding

export class AppComponent {
  textContentValue = 'Welcome to Angular App';
  blogLink = 'www.dotnethow.net';

  yourFullName = '';

  showWelcomeMessage() {
    alert('Welcome to this blog post');
  }
}

Once you run you app, you will be able to instantly see what you type

You can get the source code in this link.

Check out my FREE Angular course on Udemy to learn more: https://www.udemy.com/course/angular-beyond-fundamentals