Bindings in Angular

In this article I’ll explain all the types of data bindings in Angular in brief with syntax and example.

Data binding defines communication between component and DOM (view). Data binding is categorized based on the direction of data flow. It is passed from component to view and from view to component.

Categories of data binding in Angular

One Way Data Binding

From component to view

Data flows from component to view

1. Interpolation Binding

Interpolation is used to dynamically change what appears in view. It embeds expressions in to marked up texts.

Syntax: {{ }}

view

<h1>Interpolation Binding </h1>
<p>1. Welcome {{name}}</p>
<h3>2. angular  evaluates the expression and displays the result</h3>
<p>the addition of 2+2 is {{2+2}}</p>
<h3>3. string concatenation in interpolation</h3>
<p>{{"Welcome " + name}}</p>
<h3>4. use java scripts properties and methods within curly braces</h3>
<p>length of the name is: {{name.length}}</p>
<p>name converted to uppercase: {{name.toUpperCase()}}</p>
<h3>5. call methods defined in the component class</h3>
<p>{{Welcome()}}</p>

component

export class InterpolationBindingComponent implements OnInit {
public name = "Mifdha Milan";
constructor() { }
ngOnInit() {}
Welcome() {
return "Welcome " + this.name;
}
}

output

2. Style Binding

This is used to apply inline styles to HTML elements

syntax: []

view

<h1>Style Binding</h1>
<p [style.color]="'green'">style has been binded to this text</p>
<p [style.color]="hasError ? 'red' : 'green' ">style has been binded to this text using a conditional expression</p>
<p [style.background-color]="bgColor">style has been binded to this text</p>
<p [ngStyle]= "multiStyles">multiple style has been binded to this text using NgStyle</p>

component

export class StyleBindingComponent implements OnInit {
public hasError = false;
public bgColor = "orange";
public multiStyles = {
color: "blue",
fontStyle : "italic",
backgroundColor : "pink"
}
constructor() { }
ngOnInit() {}
}

output

3. Class Binding

This is used to add and remove CSS class names from an element’s class attribute

syntax: []

view

<h1>Class Binding</h1>
<p [class]="isSuccess">Class binding</p>
<p class="special" [class]="isSuccess">regular class attribute is not activated when we have class binding with it</p>
<p [class.danger]="hasError">class is applied based on an expression</p>
<p [ngClass]="multiClasses">multiple class binding using NgStyle</p>

component

export class ClassBindingComponent implements OnInit {
public isSuccess = "success";
public hasError = true;
public isSpecial = true;
public multiClasses = {
"success": !this.hasError,
"danger": this.hasError,
"special": this.isSpecial
}
constructor() { }
ngOnInit() { }
}

CSS

.success{
color: green;
}
.danger{
color: red;
}
.special{
font-style: italic;
}

output

4. property Binding

Properties are defined by DOM. Attribute initialize DOM properties, once the initialization complete the attribute job is done. Property values can change. Property binding helps you set values for properties of HTML elements or directives

syntax: []

view

<h1>Property Binding</h1>
<input [id]="test" value="Mifdha">
<input [disabled]="isDisabled" value="disabled input">
<input bind-disabled="isDisabled" value="disabled">

component

export class PropertyBindingComponent implements OnInit {
public test = "testing";
public isDisabled = true;
constructor() { }
ngOnInit() {}
}

output

<input _ngcontent-rxl-c4=”” value=”Mifdha” id=”testing”>

5. Attribute Binding

Attributes are defined by HTML and their values can’t change. Attribute binding helps you set values for attributes directly

syntax: []

view

<h1>Attribute binding</h1>
<button [attr.aria-label]="actionName">Setting ARIA attributes</button>

component

export class AttributeBindingComponent implements OnInit {
public actionName = "mifdha"
constructor() { }
ngOnInit() {}
}

output

In console: <button _ngcontent-rxl-c5=”” aria-label=”mifdha”>Setting ARIA attributes</button>

From view to component

Data flows from view to component

Event Binding

Event binding responds to user actions. Here, information flows from the view to the component when an event is triggered. Eg: click, change, keyup. When the specific DOM event happens it will call the specified method in the component.

syntax: ()

view

<h1>Event Binding</h1>
<button (click)="callUser()">Welcome</button>{{call}}
<button (click)="getInfo($event)">Click this button to get information about the event</button>

component

export class EventBindingComponent implements OnInit {
public call = "";
constructor() { }
ngOnInit() {}
callUser() {
console.log("welcome User");
this.call = "This is will pop up on button click";
}
getInfo(event) {
console.log(event);
}
}

output

Two Way Data Binding

data flows simultaneously in both way

Here data flows both ways from the component to the view, so the component and view are always in sync, and changes made on either end are immediately updated both ways

syntax: [()]

view

<h1>Two Way data binding</h1>
<input [(ngModel)]="name" type="text">{{name}}

component

export class TwoWayDataBindingComponent implements OnInit {
public name = "";
constructor() { }
ngOnInit() {}
}

output

The same text we type on input is printed out because of interpolation

I hope this article will be useful for you. Thank you!