htmlangulartypescriptdrop-down-menu2-way-object-databinding

Angular2 Select 2-Way Binding not updating


so im trying to Bind the selected Item of a Dropdown to a Property with 2 way binding but the property in my typescript code always stays the same.

This is my Select Tag:

<select #select class="form-control" id="favouriteValue" ([ngModel])="selectedValue">
  <option *ngFor="let value of valuesFromHomeComp" [ngValue]="value">{{value.name}}</option>
</select>

this is my component:

import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

model: any = {};
@Input()valuesFromHomeComp: any[];
selectedValue: any;

constructor() {}

ngOnInit() {
this.selectedValue = this.valuesFromHomeComp[0];
}
}

Solution

  • You're using the wrong syntax, it should be [(ngModel)] instead.

    As a hint: Its bananas in a box. The square brackets enclose the "banana" brackets.