January 22, 2021

Programmingempire

Today I talk about Angular 10 Data Binding in Different Ways. Earlier I have discussed components in Angular and how to create them. Meanwhile, the components also require data communication. Accordingly, the data binding specifies how components communicate data with the View.

Different Ways of Data Binding

As can be seen there are different ways in which we can bind data with Angular components that we discuss next.

Interpolation Binding
Property Binding
Attribute Binding
Class Binding
Style Binding
Event Binding

Let us discuss all these types of bindings one by one.

Interpolation Binding

In fact, text interpolation is the simplest way of binding data. Basically, interpolation is one of the ways for transferring data from a component to the View and it passes the values to be used in an expression that appears within curly braces. In other words, we specify interpolation string in curly braces like {{}} and the interpolation binding replaces the corresponding expression present in these curly braces with a value. As an illustration, look at the following example.

Let C1 be the name of the component. Hence, we have a file in our application called c1.component.ts which is shown below. In this file, we add two properties a and b which we use in the ca.component.html file.

export class C1Component implements OnInit {

  constructor() { }
  a="C1";
  b="24-01-2021";

  ngOnInit(): void {
  }

After that we open the html file of this component and use the above properties for interpolation strings as shown below.

<div class="row">
<div class="col-md-12"><p class="d1 d2">Component Information<br/></p>
  <p class="d1">Component Name: {{a}}<br/>
    Created On: {{b}}</p>
</div>
</div>

Property Binding

Specifically, property binding involves providing the value to the property of the target HTML element present in the View. Specifically, this value arrives from the property of a component. Now we add a property called home in the TypeScript file of the component as shown below.

export class C1Component implements OnInit {

  constructor() { }
  a="C1";
  b="24-01-2021";
  home='https://programmingempire.com';

  ngOnInit(): void {
  }

Further, we create a hyperlink in the corresponding html file of the component and use the above property as shown below.

        <a [href]=home>Click Here</a>

Attribute Binding

Another type of data binding available with Angular is attribute binding and it applies when we wish to bind the attribute property of an HTML element residing in the View. Basically, attribute binding takes place when we bind data to the HTML element whereas property binding is done with the DOM element.

Unlike property binding, we use attributes of HTML elements and use a prefix of attr followed by a dot (.) and the attribute name. The following example shows the attribute binding.

//c1.component.ts
export class C1Component implements OnInit {

  constructor() { }
  a="C1";
  b="24-01-2021";
  home='https://programmingempire.com';
  t1="Write some text here...";
  d="true";
  ngOnInit(): void {
  }

//c1.component.html
  <input type="text" [attr.value]=t1 [attr.disabled]=d/>

Class Binding

In fact, we can perform data binding for providing the value to a class property present in the View. Accordingly, we can apply and remove CSS classes to the View elements using Class binding.

In general, we can perform both single class binding as well as multiple-class binding. The syntax for single class binding is as follows. Further, if the condition holds true then the class will apply to the corresponding element.

[class.classname]=condition

Similarly, the syntax for multiple-class binding is given below where expression is the list of classes. However, you can also specify the list of classes in a property specified in the corresponding component.

[class]=expression|property-name

As an example, consider following HTML elements of the component where the <p> tag uses multiple classes which we can specify in the corresponding TypeScript file. Also, the class d4 is applied to the <a> tag.

//c1.component.html

<p [class]=pclasses>An example of class binding...</p>
<a [href]=home [class.d4]="true">Click Here</a>

//c1.component.ts
export class C1Component implements OnInit {

  constructor() { }
  a="C1";
  b="24-01-2021";
  home='https://programmingempire.com';
  t1="Write some text here...";
  d="true";

  pclasses="d2 d3";
  ngOnInit(): void {
  }

//c1.component.css

.d2{
  background-color: #0000ff;
  text-align: left;
  min-height: 20px;
}
.d3
{
  font-size: 35px;
  font-weight: bold;
  font-family: 'Comic Sans MS';
}
.d4{
  background-color: #fd33fd;
  font-family: 'arial black';
}

Style Binding

Besides property and attribute binding, you can also apply a particular style to a View element. For instance, suppose you want to set the color or font-size of an element in View, you can do so using the style binding. Moreover, the syntax for style binding is similar to that of class and attribute binding. As an illustration, consider the following example.

//c1.component.ts
export class C1Component implements OnInit {

  constructor() { }
  a="C1";
  b="24-01-2021";
  home='https://programmingempire.com';
  t1="Write some text here...";
  d="true";

  mystyle="orange";
  pclasses="d2 d3";
  ngOnInit(): void {
  }

//c1.component.html
<div class="col-md-4 d1" [style.background-color]=mystyle>
   Example 2
</div>

Event Binding

Finally, we can apply event binding to make it possible to respond to user events. Indeed it is a way of transferring data from View to the Component. It means suppose user performs an action by clicking a button. Therefore, event binding transfers this information to the component so that corresponding action can take place by executing some method.

For example, suppose we have a button and a <p> tag. Further, the <p> tag contains an interpolation string that retrieves the value of a property in the corresponding component. Suppose, we want to change the content of <p> when the button is clicked. Therefore, we specify an even binding that invokes a method that modifies the value of that property as shown below.

//c1.component.ts
export class C1Component implements OnInit {

  constructor() { }
  a="C1";
  b="24-01-2021";
  home='https://programmingempire.com';
  t1="Write some text here...";
  d="true";

  mystyle="orange";
  pclasses="d2 d3";

  mydata="Waiting for Button to be Clicked!";

  public ClickIt(){
    this.mydata="Button Clicked!";
  }
  ngOnInit(): void {
  }
}

//c1.component.html
<div class="col-md-4 d1">
        Example 3
        <br/>
        <button name="b1" (click)="ClickIt()">Click Me</button><br/>

        <p>{{mydata}}</p>
</div>

Example of Angular 10 Data Binding in Different Ways

Summary

This article on Angular 10 Data Binding in Different Ways explains the concept of data communication between the Component and View using several examples. As can be seen, we have many ways to apply the value of some property given in the component to a View element. Indeed, we can dynamically control the content of the page whether it is a value, a property of an HTML element, or a style element. Moreover, we can also apply CSS classes on the basis of certain conditions. Also, it is possible to specify certain actions when an event occurs using the event binding.

Programmingempire

Different Ways of Data Binding

Interpolation Binding

Property Binding

Attribute Binding

Class Binding

Style Binding

Event Binding

Example of Angular 10 Data Binding in Different Ways

Summary

Further Reading

You may also like...

A Brief Tutorial on Angular

Introduction to Angular and its Key Features

Which Front End Technology is Better: Angular or React?