All You Need to Know About Data Binding in Angular

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

What Is Angular Data Binding?

Data binding allows Internet users to manipulate web page elements with the help of a web browser. It includes dynamic HTML and does not require complex programming. Data binding is used in web applications that contain interactive components such as forms, calculators, tutorials, and games. The incremental display of a webpage makes data binding convenient when pages contain an extensive amount of data. 

Angular uses the concept of two-way binding. Any UI element-related change is reflected in the corresponding and specific model state. Conversely, any model state changes reflect in the UI state. This ensures that the framework is able to connect the DOM to the Model data with the help of the controller.

AngularJS Controller

The AngularJS Controller is the part of the AngularJS application that controls the data binding. It is responsible for linking the data to the view and vice versa. The Controller also handles all the user input and output.

The AngularJS Controller is very important in AngularJS applications as it is responsible for managing the data binding. Without a controller, the data binding would not be possible, as the user would not be able to interact with the application.

Attribute Binding 

Attribute binding in Angular helps you bind to HTML attributes of elements in your template. This can be useful when you want to dynamically update the appearance or behavior of an element based on some condition. For example, you might want to hide an element unless a user is logged in, or change the color of an element based on its status. To bind to an attribute, you use the square brackets around the attribute name.

Class Binding

Angular offers various ways to bind data to HTML elements. Class binding is one of them. It allows you to dynamically add or remove CSS classes from an element. This can be useful for applying styles based on certain conditions.

Style Binding

Style binding is a one-way data binding technique that can be used to set the value of a CSS property on an element. To use style binding, you first need to have a CSS property that you want to bind to an element. 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

ngModel

Angular data binding is a two-way process: it can both send and receive data. This means that when you change something in your view, the model updates automatically, and vice versa. The ngModel directive makes this two-way data binding possible.

When you use the ngModel directive, you specify a property of the scope as the value of the directive. This tells Angular to create a two-way binding between the property and the input control. Any changes to the control are automatically reflected in the model, and any changes to the model are automatically reflected in the control.

Types of Data Binding

Interpolation Binding

Interpolation is a procedure that allows the user to bind a value to the user interface element. Interpolation binds the data one-way, which means that data moves in one direction from the components to HTML elements. 

We’ve added the code for the same below. 

In the app.component.ts file, we’ve created two properties called name and topic. 

export class AppComponent {

  title = 'binding';

  public name = "Simplilearn"

  public topic = "Data Binding"

To interpolate and bind them in the HTML file, type the following code 

<h1 style="text-align: center;">Welcome to {{name}}</h1>

<h2 style="text-align: center;">Welcome to the {{topic}} tutorial</h2>

The output will look like this:

Property Binding

Property binding is a one-way data binding mechanism that allows you to set the properties for HTML elements. It involves updating a property value in the component and binding the value to an HTML element in the same view. We use property binding for toggle functionality and sharing data between components. It uses the "[]" syntax for data binding. 

Also Read: How to Learn Angular: Benefits of Angular and Certifications

In the app.component.ts file, I’ve created another property called image and provided the path to the Logo in the assets folder.

public image = "/assets/Logo.png"

In the app.component.html file.

<img [src] = "image" alt="" style="height: 100px; width: 250px" class="center">

The output now looks like this.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Event Binding

Event binding type is when information flows from the view to the component when an event is triggered. The event could be a mouse click or keypress. The view sends the data to update the component. Unsurprisingly, it is the exact opposite of property binding, where the data goes from the component to the view.

We have created a Subscribe button that displays a “Thank you” message when clicked on. 

<br><button (click)="onClick()">Subscribe to Simplilearn</button></div>

To display the message on the console, we’ve created a function called onClick() in the app.component.ts file. 

onClick(){

    console.log("Thanks for subscribing")

  }

Every time the user clicks on the button, the message is displayed on the console. 

Two-way Data Binding

As the name suggests, two-way binding is a mechanism where data flows from the component to the view and back. This binding ensures that the component and view are always in sync. Any changes made on either end are immediately reflected on both. The general syntax to denote two-way data binding is a combination of Square brackets and parentheses "[()]". 

To illustrate two-way data binding, we’ve created a property with an empty string and an input box for the user to type. Whatever the user provides is displayed on the screen with the help of the property. 

In the .ts file, 

public random = ""

In the .html file, we’ve created an input field

<input [(ngModel)]="random" type="text"> <br>

  {{random}}

We have used the ngModel directive and initialized it to random. We’ve then interpolated the property random. 

As you can see, it stores the text in the input field in the random property. 

Learn the concepts such as TypeScript, Bootstrap Grid System, dependency injections, SPA, forms, pipes, promises, observables, and Angular class testing with the Full Stack Developer - MERN Stack.

Next Steps

We hope that this Angular Data Binding tutorial helped you understand the different ways of binding data to the view and the component. If you are seeking to learn advanced and practical aspects of Angular to make a career in the field, this angular certification will come in handy.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Simplilearn's Full Stack Developer - MERN Stack Course  provides a detailed understanding of front-end web development by using Angular. Also, in this course, you will learn to develop applications, including facilitation of single-page web applications, its components, typescript, and dependency injection. The program also includes a real-world practical project to test your skills and help perfect them. 

If you have feedback or questions on the topic, please drop us a comment in the comments section of this article. We will get back to you ASAP!