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:
