CODEWITHSUNDEEP
selectdrop-down-menuangular
Yuniku_123
Yuniku_123

Reputation: 279

Angular 2 JS dropdown, select item from another component

I have two components one is employee and another is department. I want to make a dropdown so that employee can select a department.

I implemented a method for getting all departments inside my employee component:

getAllDepartment(){
  this._employeeService.getAllDepartment()
 .subscribe(data => this.departments = data.json());
}

in my employee html select looks like this:

<label for="editTitle">Department:</label><br>
  <select  [(ngModel)]="newItem.Department" (click)="getAll()" style="width: 180px">
  <option *ngFor="#department of departments" [value]="department.departmentNo">{{department.departmentName}}</option>
  </select>

but noting happens.
What is the best way for make this dropdown work and select items? This is ahtml where I have select:

  <form  #f="ngForm" [hidden]="!showAddView" align="center">
        <div>
            <label for="editTitle">Employee No:</label><br>
             <input type="text" [(ngModel)]="newItem.employeeNo" ngControl="employeeNo" required >    

        </div>
        <div>
            <label for="editAbrv">Employee name:</label><br>
              <input type="text" [(ngModel)]="newItem.employeeName" ngControl="demployeeName" required >    
        </div>

            <div>
            <label for="editTitle">Department:</label><br>
            <select [(ngModel)]="newItem.departmentNo" (click)="getAll()" style="width: 180px">
               <option *ngFor="#department of departments" [value]="department.departmentNo">{{department.departmentName}}</option>
           </select>
        </div>

        <div>
            <label for="editAbrv">Salary:</label><br>
             <input type="text" [(ngModel)]="newItem.salary" ngControl="salary" required>    
        </div>

        <div>
            <a href="javascript:void(0);" (click)="addEmployee(newItem)" title="Add">
                Save
            </a>
            <a href="javascript:void(0);" (click)="showHide($event)" >
                Cancel
            </a>
        </div>
</form>

Upvotes: 0

Views: 858

Answers (1)

gamesmad
gamesmad

Reputation: 409

You are binding the click event of the select box to a getAll() method, but the method that you have defined is called getAllDepartment().

You need to bind the event to an existing method name.

That being said, I'm unsure why you would want to reload the departments every time the dropdown is clicked. If the desired behaviour is to load the departments once when the component is initialized, you should add a constructor() method to the component, which will be called automatically.

constructor() {
    this._employeeService.getAllDepartment()
        .subscribe(data => this.departments = data.json());
}

Upvotes: 1

Related Questions