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 –
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
