Angular Data Binding in detail in Angular 11 | 12 .?

Angular data binding allows communication between templates and components. With data binding, we can control every aspect of the user interface of our components by changing variables, hiding variables, showing variable values, we can accept user input, allowing the component to change the value of some variables. Angular data binding helps bring data in TypeScript code to the view or HTML, and vice versa.

An Angular allows a couple of ways for displaying data on the view. String interpolation and property binding are the data binding types in Angular, used for moving data from the component to the template.

Angular data binding types

Angular data binding is incredibly powerful and easy to use. An Angular data binding can be classified mainly by two types.

  • One-way data binding
  • Two Way Data Binding

One Way Data binding:

Angular one-way data binding allows binding of the data from the component to the view (DOM) or from view to the component. One-way data binding is unidirectional. There are different ways or types of using one-way data binding as below.

  1. String interpolation
  2. Attribute binding
  3. Property binding
  4. Style binding
  5. Class binding

String interpolation One-Way Data Binding

Those double curly braces are also known as mustaches or interpolations. Angular string Interpolation is a special syntax to show data in an HTML view. The double curly braces ({{ }}) are used for one-way binding a template expression, variable and evaluate the expression between the curly braces as per the component backing it, and then render the result as a string in place in the HTML.

The expression produces a value, and it’s included in the View (the markup from the component template). The Model—that is, the data in the Component class—is never updated.
Example: Expression in string interpolation
{{ 2+4 }} output view in 6 in template|viewCreate a simple angular app – change the value of the app.component.ts file to

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
  <h1> {{ name }} </h1>
  <p> Length: {{ name.length}} </p>
  <p> Reversed: {{getAge()}} </p>
  <p>{{ 55 + 45 }} </p>
 `,
  styles: []
})
export class AppComponent {
  name = 'John Smith';
  dob = 1997;

getAge(){
    return 2018-1997;
  }
}

In the above example, we have used interpolation to render the name ad dob. This picks up the values of name and dob from getAge() method then replaces the double-curly expression with its value, thus rendering our UI.

angular data binding example

One-Way Data Binding with property binding

This is the Angular syntax for property binding, which binds the value of the expression to the DOM property between the square brackets. With [] we can bind a template expression, making a calculation from available data in the Model and including it in the data binding target.

Property binding allows us to bind a dynamic value to a DOM property. It is easy and we had frequently used it many times. Like enabling or disabling a control, setting a dynamic value for a text field, or setting a dynamic path on an image.

[Data Binding Target] = “Template Expression”


Angular One-Way Data Binding with *
*Data Binding Target = “Template Expression”
The data binding target with * is something in the DOM (including element properties, component properties, and directive properties) that can be bound to the result of the expression on the right side of the target, as shown in.

angular one-way data binding example

The property is enclosed in square brackets for data binding. That is all it takes to
apply property binding.

Angular event binding

Angular event binding allows us to listen for certain events such as clicks, touches, keystrokes, and mouse movements so that we can respond to this event. Event binding syntax consists of a  target event name within parentheses on the left and a quoted template statement on the right.


To test the event bindings in action let’s wire the “input” event on the input element and whenever the user types the keyboard the input event is raised and we assign the value of the input to the variable name. We also have added a click event on the button.

angular event binding example
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <div class="content">
    <h4>Angular event input event binding</h4>
    <input [value]="name" (input)="name = $event.target.value">
    {{name}}<br/><br/>
    <button (click)="alertMsg()">Click Event</button>
  </div>
 `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  name = '';

  alertMsg() {
    alert('Edupala click event');
  }
}

Class Binding (CSS classes)

Angular provides special support in property bindings for assigning the host element to classes and for configuring individual style properties. The class binding allows us to apply a CSS class to an element. Using data binding to apply one or more CSS classes on an element. It provides us to change the CSS class, and hence, change the styles of an element.

<div [class]="cssClasses">
    ...
    CSS classBinding
</div>

// In Component typescript define cssClass property
 cssClasses: string = "addBorder addBackgroundColor"

// In component style we can add styles as

.addBorder {
    margin: 10px;
    padding: 20px;
    width: 200px;
    border: 1px solid black;
} 
.addBackgroundColor {
    background-color: springgreen;
}

We can control CSS classes using the method on the class binding.

<div [class]="getClasses(1)">
   ......
</div>

Read our previous articles on Angular two-way data binding in detail. Read more information on Angular data binding in official angular documentation.

Related posts

Leave a Comment

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

Scroll to Top