DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. Data Binding in Angular

Data Binding in Angular

A discussion of the four important types of data binding in Angular applications: string interpolation, property binding, event binding, and two-way data binding.

Nit A user avatar by
Nit A
·
Dec. 05, 18 · Tutorial
Like (11)
Save
Tweet
Share
87.99K Views

Join the DZone community and get the full member experience.

Join For Free

This post is primarily focused on what data binding is and the types of data binding available.

  • String Interpolation.
  • Property Binding.
  • Event Binding.
  • Two-Way Data Binding.

Data binding is one of the most powerful and important features in any software development language. It allows us to define communication between the component and view. So we can say that data binding is passed from component to view and from view to the component.

Types of Data Binding in Angular

1. String Interpolation: The type of one-way data binding where text is between a set of curly braces often uses the name of a component property. Angular replaces that name with the string value of the corresponding component property. The syntax of string interpolation is to use double curly braces {{ code }}.

2: Property Binding: Property Binding allows us to bind the view of the template expression. Property binding in simple term is defined as updating the value of a certain variable in component (model) and displaying it in view (presentation layer).

This is a one-way mechanism, thus it allows you to change the value whenever you want but only at the component level.

binding.component.html

<h1>PropertyBinding</h1>
<img [src]="imagePath" class="image-adjustment"/><br>

Note: You can achieve property binding using square brackets for the src tag, and also putting component value in quotes.

binding.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-binding',
  templateUrl: './binding.component.html',
  styleUrls: ['./binding.component.css']
})
export class BindingComponent implements OnInit {
  constructor() { }
   imagePath: string = 'assets/images/Databinding.png';
  ngOnInit() {}
  }
}

Though, both doing the same thing, so what is the difference between Property Binding and Interpolation?

For better understanding refer the given example below:

Now we take one button and the value of button is coming from the component class which is disabled using disabled property.

binding.component.html

<h1>Data Binding in Angular</h1><br>
<h1>Interpolation</h1>
<img  src = {{imagePath}} class="image-adjustment"/>
<br>
<button disabled={{currentValue}}>CLICK ME</button>

Now the same thing will do with property binding. In Property Binding the attribute [disable] we have to define in a square bracket and in quotes we can mention the name of the variable.

<h1>PropertyBinding</h1>
<img [src]="imagePath" class="image-adjustment"/><br>
<button [disabled]="currentValue" (click)="onClick()">CLICKME</button>

binding.component.ts

export class BindingComponent implements OnInit {
  constructor() { }
   imagePath: string = 'assets/images/Databinding.png';
   currentValue: boolean = true;
  ngOnInit() {}
}

Output:

Inter1


prop2

So now you can check that both the buttons are disabled, but if we change the value of the variable to false, we can see that button in the string interpolation code is still disabled while in property binding code it is enabled.

Example:

export class BindingComponent implements OnInit {
  constructor() { }
   imagePath: string = 'assets/images/Databinding.png';
  currentValue: boolean = false;
  ngOnInit() {
  }
}

Output:

prop3Inter1

Now we can see that button in string interpolation is still disabled while in property binding it is enabled now.

Note: So where you have to use string expression use interpolation and when you are dealing with non-string expression using property binding.

3: Event Binding: Event binding is defined as the updating/sending of the value/information of a certain variable from the presentation layer (view) to the component (model). For example, clicking a button.

binding.component.html

<h1 Event Binding></h1>
<h1>{{title}}</h1>
<button (click)="changeMyTitle()">Title is changed on click of this button.</button>

binding.component.ts

export class BindingComponent implements OnInit {
  constructor() { }
   title = 'Learning string interpolation';
  ngOnInit() {
  }
changeMyTitle() {
  this.title = 'Learning Event Binding';
}
}

Output:

Event1event2

Now the user will take any action from the template and, according to that this method, it will invoke and execute. Also, click() is not the only DOM event available; you can also use other events such as submit, mouse enter, blur events, etc.

4: Two-Way Data Binding: Two-way data binding is a combination of both Property and Event binding and it is a continuous synchronization of a data from view to the component and component to the view, i.e. changes made in the component's data should sync to the view and should immediately update the model into the corresponding component with view data.

Two_Way_Data_Binding

Two-way data binding is mainly used in data entry forms where the user changes the view and makes changes in the model with the view data and vice-versa. So, as we know, Angular uses the combination of Property binding and event binding to implement two-way data binding with the help of the ngModel directive.

NgModel is not a part of Angular's code library, it is defined in the forms module library so you need to import the FormsModule library in your app.module.ts file. Now we can use the ngModel directive to implement two-way data binding.

binding.component.html

<h1>Data Binding in Angular</h1>
<h2>Learning Two-Way DataBinding</h2>
<input type = "text" [(ngModel)]="userName"/>
<br>
<h4>Welcome: {{userName}}</h4>

Output:

2wayThanks for reading!

Originally published on the Knoldus blog.

Data binding AngularJS Property (programming)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Understanding gRPC Concepts, Use Cases, and Best Practices
  • SAST: How Code Analysis Tools Look for Security Flaws
  • Promises, Thenables, and Lazy-Evaluation: What, Why, How
  • Memory Debugging: A Deep Level of Insight

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: