Dropdown binding in Angular 6 by *ngFor

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);

      }

     

}

You Can Subscribe my Channel for upcoming VDO related to Angular Shubh Techno Expert