All You Need to Know About Data Binding in Angular

There are various ways in which we can display data on the view. The process of displaying this data is Data Binding. Angular Data binding is an essential and powerful aspect of software development. It defines the communication between a component and its views. Data binding brings dynamism and interactivity to applications.

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.

Stand Out From Your Peers this Appraisal Season

Start Learning With Our FREE CoursesEnroll Now
Stand Out From Your Peers this Appraisal Season

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. 

components-angular

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:

welcome-simplilearn

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. 

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.

welcome-2-simp

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

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.

view-event

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. 

simplilearn-welcome

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 "[()]". 

2-way

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. 

welcome-3

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 Angular Certification Training Course.

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.

Simplilearn's Angular Certification Training 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! 

About the Author

Nikita DuggalNikita Duggal

Nikita Duggal is a passionate digital nomad with a major in English language and literature, a word connoisseur who loves writing about raging technologies, digital marketing, and career conundrums.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.