Angular

Angular 10 Data Binding in Different Ways

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.

  1. Interpolation Binding
  2. Property Binding
  3. Attribute Binding
  4. Class Binding
  5. Style Binding
  6. 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

Angular 10 Data Binding in Different Ways
DemonstratingAngular 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 action when an event occurs using the event binding.


Related Topics

Creating Single Page Applications with Angular

Creating Some Angular Components

Further Reading

Introduction to Programming in TypeScript

Creating Classes in TypeScript

Working with Arrays in TypeScript

Significance of Tuples in TypeScript

Explaining Interfaces in TypeScript with Examples

How to Create and Use Arrow Functions in TypeScript

Using TypeScript Modules

Working with Generics in TypeScript

Leave a Reply

Your email address will not be published. Required fields are marked *