Dropdown binding in Angular 6 by *ngFor
Looping can be achieved by *ngFor directive
Syntax *ngFor="let item of collection"
<select id="slemp" (change)="GetEmp($event)">
<option *ngFor="let item of Empcollection" value={{item.EmpCode}} >
{{item.EmpName}}
</option>
</select>
Here one Dropdown is created and its value and text is shown in an alert box . we have created a GetEmp($event) method and passed event as an argument by which we will get the control value .
you can Follow Shubh Techno Expert
Salesperson.Component.Html
<div>
<h1 style="text-align: center;">Dropdown binding in Angular by *ngFor</h1>
<div align="center">
<select (change)="myEmp($event)" >
<option *ngFor ="let item of Empcollection" value={{item.EmpCode}}>{{item.EmpName}}</option>
</select>
</div>
Salesperson.Component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-salesperson',
templateUrl: './salesperson.component.html',
styleUrls: ['./salesperson.component.css']
})
export class SalespersonComponent implements OnInit {
constructor() { }
ngOnInit() {
}
Empcollection: any =
[
{ EmpCode: "E001",EmpName: "Nagendra", Email: "Nagendra@test.com", Salary: 8000 },
{ EmpCode: "E002",EmpName: "Raj", Email: "raj@test.com", Salary: 70000 },
{ EmpCode: "E003",EmpName: "Shubh", Email: "Nagendra@test.com", Salary: 80000 },
{ EmpCode: "E004",EmpName: "Techno", Email: "Shubh@test.com", Salary: 9000 }
]
myEmp(event)
{
alert("Emp Name Selected :" + event.target.value);
}
}
