Angular 2 JS dropdown, select item from another component

Question

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>

gamesmad · Accepted Answer · 2016-02-26 10:29:49Z

1

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

answered Feb 26, 2016 at 10:29

gamesmad

4091 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yuniku_123 Over a year ago

But, I have a problem, when I select something from dropdown, item isn't selected (I can see it on table).

gamesmad Over a year ago

I'm unclear on the problem. Create another question with the specifics.

Collectives™ on Stack Overflow

Angular 2 JS dropdown, select item from another component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related