Data Binding in Angular

Interpolation Binding

Interpolation binding is used to return HTML output from TypeScript code i.e. from the components to the views. Here, the template expression is specified within double curly braces. Through Interpolation, strings can be added into the text that is present between HTML element tags and within attribute assignments. These strings are calculated using Template expressions. 

EXAMPLE:

 

<h1>{{title}}</h1>


Learn <b> {{course}}
</b> with Edureka.

2 * 2 = {{2 * 2}}



<div><img src="{{image}}"></div>

The Typescript part of this code is as follows:

export class AppComponent {
  title = 'Databinding';
  course ='Angular';
  image = 'paste the url here'
}

OUTPUT:

The component property is specified between the 2 curly braces. Angular will replace this component property with the string value associated with that component property. It can be used in different places according to the requirements. Angular converts interpolation into property binding. Check out this Full Stack Developer Course Online and learn more about Angular today.

Angular also allows you to configure the interpolation delimiter and use something of your choice instead of the two curly braces. This can be done using the interpolation option in the Component metadata.

Check out the Angular Certification Training Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications.

Template expressions

Template expressions are present within the two curly braces and they produce a value. Angular will execute that expression and then, it assigns that particular expression to a property of a binding target such as HTML elements, components, or directives.

NOTE: 2 * 2 present between interpolation brackets, is a template expression.

Property Binding

In Property binding, value flows from a component’s property into the target elements property. Therefore, Property binding can’t be used to read or pull data from the target elements or to call a method that belongs to the target element. The events raised by the element can be acknowledged through event binding which will be covered later on in this article.

In general, one can say that the component property value will be set to the element property using Property binding. 

EXAMPLE:

<h1>Property binding</h1>


<div><img [src]="image"></div>

In the above example, the src property of the image element is bound to a component’s image property.

Property binding and Interpolation

If you have noticed, you can see that interpolation and property binding can be used interchangeably. Take a look at the example pair given below:

<h2>Interpolation</h2>

<div><img src="{{image}}"></div>

<h2>Property binding</h2>

<div><img [src]="image"></div>

Please make a note that when you need to set element properties to non-string data values, you must use Property binding and not Interpolation.

Event Binding

The Event binding feature lets you listen to certain events such as mouse movements, keystrokes, clicks, etc. In Angular, event binding can be achieved by specifying the target event name within regular brackets on the left of an equal to ( = ) sign, and the template statement on the right side within quotes (” “).

EXAMPLE:

<div>
  <button (click)="goBack()">Go back</button>
</div>

The ‘click‘ in the above example is the target events name and ‘goBack()’ is the template statement.

OUTPUT:

Whenever event binding occurs, an event handler will be set by Angular for the target event. When that particular event gets raised, the template statement is executed by the handler. Generally, receivers are involved with template statements that perform actions in response to the event. Here, binding is used to convey information about the event. These data values of the information include event string, object, etc.

Two-way Binding

Angular allows two-way data binding that will allow your application to share data in two directions i.e. from the components to the templates and vice versa. This makes sure that the models and the views present in your application are always synchronized. Two-way data binding will perform two things i.e. setting of the element property and listening to the element change events.

The syntax of two way binding is – [( )}. As you can see, it is a combination of the property binding syntax i.e. [ ] and the event binding syntax ( ). According to Angular, this syntax resembles “Banana in a Box”.

EXAMPLE:

<label ><b>Name:</b>
        <input [(ngModel)]="course.name" placeholder="name"/>
      </label>

When you execute this code, you will see that changes to either the models or the views will result in changes to the corresponding views and models. Take a look at the image below that shows the name of the course being changed from ‘Python’ to ‘Pytho’ from the views:

This brings us to the end of the “Angular Data Binding” article. I hope this was informative and added value to your knowledge. I would recommend you to go through this Angular 8 Tutorial Edureka video 3 and learn how to create an Angular application from scratch.

With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development. Discover the benefits of cross-platform development with a best Flutter course and save time and resources.