Angular2 select not working

Question

Angular2 select always showing Select A Department as default value.

user-form.comp.html

<div class="form-group label-floating" *ngIf="user.isAdmin || user.adminKey">
    <nb-select-department *ngIf="departments" [previousDepartment]="user.department" [departments]="departments" (done)="onSelectDeperatmentDone($event)"></nb-select-department>
  </div>

usr-form.comp.ts

  @ViewChild(SelectDepartmentComponent)
  private selectDepartmentComponent: SelectDepartmentComponent;

This method gets called if there any change in the user-form component.

ngOnChanges() {
    console.log(this.user);
    if (this.user.department) {
    this.selectDepartmentComponent.setPreviousDepartment(this.user.department);
    }
  }

sel-dept-com.html

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Select A department" [(ngModel)]="selectedDepartment"
  (ngModelChange)="onChangeDepartment()" required>
      <option *ngFor="let department of departments"
        [ngValue]="department">
        {{department.name}}
      </option>
</select>

sel-dept-comp.ts

  @Input() departments: any;
  @Input() previousDepartment: string;
  @Output() done: EventEmitter<any> = new EventEmitter();
  private selectedDepartment: any;
  value: string;

  constructor() { }

  ngOnInit() {
    this.setPreviousDepartment(this.previousDepartment);
  }

  setPreviousDepartment(deptName: string) {
    for(let dept of this.departments) {
      if(dept.name === deptName) {
        this.selectedDepartment = dept;
      }
    }
  }

  onChangeDepartment() {
    this.done.emit(this.selectedDepartment);
  }

Note that setPreviousDepartment method should be called from the parent component. But on the chrome dev tools, Development dept got selected, ie, selected=True attribute set on development option.

<nb-select-department _ngcontent-fmh-68="" _nghost-fmh-69="" ng-reflect-departments="[object Object]" ng-reflect-previous-department="Development"><div class="btn-group bootstrap-select ng-untouched ng-pristine ng-invalid open"><button type="button" class="dropdown-toggle bs-placeholder btn btn-primary btn-round" data-toggle="dropdown" role="button" title="Select A department" aria-expanded="true"><span class="filter-option pull-left">Select A department</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open" role="combobox" style="max-height: 179px; overflow: hidden; min-height: 0px;"><ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 179px; overflow-y: auto; min-height: 0px;"><li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">
        Development
      </span><span class="material-icons  check-mark"> done </span></a></li></ul></div><select _ngcontent-fmh-69="" class="selectpicker ng-untouched ng-pristine ng-valid" data-style="btn btn-primary btn-round" required="" title="Select A department" tabindex="-98" ng-reflect-model="Development"><option class="bs-title-option" value="">Select A department</option>
      <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object]"
}--><option _ngcontent-fmh-69="" value="0: Object" ng-reflect-ng-value="[object Object]" selected="true">
        Development
      </option>
</select></div>
</nb-select-department>

Answer 1

selectedDepartment is a string where department is an object they don't have a relation in between. If you want to dynamically change ngValue with ngModel, they should have the same object reference.

So, selectedDepartment should be selected from your departments array.

Example Plunker: http://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview

Answer 2

The selected attribute is meaningless if you use ngModel.

If selectedDepartment contains the value of the element you want have selected, it will be shown as selected anyway.

Just remove

[attr.selected]="department.name === selectedDepartment"

There might be other problems though.