Welcome back to another short and insightful post on Angular.

I am going to explain the different ways of binding data in Angular and they are pretty interesting stuff.

Comment your favorite binding in the comments below!

1. String Interpolation

• By default, interpolation uses double curly braces, {{ and }}.
• Embedding expressions / component property / hardcoded data within {{ }} renders value on UI.
• In the below example, Angular replaces the “name” with the string value of the corresponding component property.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html

Welcome {{ name }}

Run on Stackblitz .

2. Property Binding:

• Map DOM properties (id, innerHTML etc.,) with component property.
• Surround DOM properties with square brackets and assign component property to them.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html

Welcome <span [innerHTML]="name"></span>

Run on Stackblitz.

3. Attribute Binding:

• Some HTML attributes don’t have corresponding DOM properties; for example, aria-*.
• These attributes need to be prefixed with ‘attr’ to bind in Angular.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 header: string = 'This is a header';
}

app.component.html

<h1 [attr.aria-label]="header">Welcome to Angular</h1>

Run on Stackblitz.

4. JavaScript Binding (2 Way):

• Without using ngModel, we can bind the value between Component property in Typescript with a UI element.
• Based on User action, binding conveys information about the event, that includes data keyed-in / entered by User through $event object.

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string = "Udhay";

  assignName(event) {
    this.name = event.target.value;
  }
}

app.component.html

Welcome {{ name }}

<p>
    <input  [value]="name" (input)="assignName($event)"/>
</p>

Run on Stackblitz.

5. ngModel (1 Way Binding):

• Yay Power of ngModel. 💪 It helps in fetching the value of UI control in a more efficient way. Assign component property to ngModel.
• Make sure you import FormsModule in your root module, as ngModel needs this module.
• This will fetch data from UI to Controller, which is One way.

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html

Welcome {{ name }}

<p>
  <input  [ngModel]="name"/>
</p>

Run on Stackblitz.

6. ngModel (2 Way Binding):

• Yay Power of ngModel again.. 💪 but this time it’s gonna be used for two-way binding. It helps in fetching the value in a bidirectional way, yes from UI to component and vice versa.
• Make sure you import FormsModule in your root module, as ngModel needs this module.
• Based on User action, ngModelChange event binding conveys information about the event to the component, which includes data keyed-in / entered by User through $event.

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Udhay";

  assignName(str) {
    this.name = str;
  }
}

app.component.html

Welcome {{ name }}

<p>
  <input  [ngModel]="name" (ngModelChange)="assignName($event)"/>
</p>

Run on Stackblitz.

7. ngModel - Banana in a box (2 Way Binding):

• Yay Power of ngModel again.. 💪 but this time it’s gonna be used for two-way binding. It helps in fetching the value in a bidirectional way, yes from UI to component and vice versa.
• Make sure you import FormsModule in your root module, as ngModel needs this module.
• Two-way binding is achieved easily by putting component property within [( )], which looks like a banana in a box.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Udhay';
}

app.component.html

<hello name="{{ name }}"></hello>

<p>
  <input  [(ngModel)]="name"/>
</p>

Run on Stackblitz.

Hope you find this article useful, please feel free to share it with your friends/colleagues.

If you got any questions, feel free to post them in the comments section down below.

Happy learning!

I tweet a lot about Web development, Java, and Productivity Hacks, so feel free to follow me on Twitter at AskUdhay.

Here is one of my recent tweets: