Learning Outcomes –
ü What Is Data Binding in Angular 5 and 4?
ü How To Bind Select Dropdown List in Angular 5?
ü How to bind dropdown list using Angular 5?
ü Angular 5 Interpolations, Property Binding & Event Binding Examples
Stayed Informed – Angular 4 and Angular 5 Docs
What Is Data Binding?
The Data binding is one of the most powerful and important features in a development language.
Types of Binding in Angular 5 and 4 –
1. Interpolation
2. Property Binding
3. Two-Way Data Binding
4. Event Binding
The examples for Angular data binding -
Interpolation - The format for defining interpolation in a template is - {{ propertyName }}
<input type="submit" class="default" value="{{username}}">
Property Binding -
<input type="submit" class="default" [value]="username">
Two-Way Data Binding –
<input type="text" class="default" name="item" [(ngModel)]= "username">
<span>User Name - {{ username }}</span>
Event Binding -
// employee.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
//Property
count: number = 5;
users = [];
username: string = 'Anil Singh';
//Employee Aray List
employees =['Anil', 'Sunil','Alok', 'Raju','Sunny'];
ngOnInit() {
this.count = this.users.length;
}
addItem() {
this.users.push(this.username);
this.username = '';
this.count = this.users.length;
}
}
// employee.component.html
<h2>Select Employee -</h2>
<div>
<select>
<option *ngFor="let emp of employees">{{emp}}</option>
</select>
</div>
<form>
<h2>Add User - </h2>
<div>
<input type="submit" class="default" value="{{username}}" (click)="addUser()">
</div>
</form>
The result looks like –