ngModel shows previous value selected on md-select

Question

When I console log selectedVendor in the method vendorUpdate it shows the previous value of selectedVendor instead of the new value.

<div>
   <md-select id="vendorVariable" class="vm-select-wrap" 
              (ngModelChange)="vendorUpdate()"
              [(ngModel)]="selectedVendor" placeholder="AWS" 
              name="vendorVariable">
      <md-option *ngFor="let vendor of vendors" value={{vendor.small}}>
          {{vendor.caps}}
      </md-option>
   </md-select>
</div>

TS file:

vendors: any = [
   {caps: "AWS", small: "aws"},
   {caps: "AZURE", small: "azure"}
];

selectedVendor :any;                    

vendorUpdate(){
  this.selectedVendor = this.selectedVendor;
  console.log(this.selectedVendor);  
}

On selecting the value from select dropdown selectVendor prints the previous selected value, whereas the current selected value should be printed.

score 3 · Accepted Answer · answered Jul 28 '17 at 14:59

3

[(ngModel)] basically equals: [ngModel] and (ngModelChange). So I would suggest to use either.

You can skip the ngModelChange if you use two-way binding like Pankaj suggested. Otherwise you can also use one-way binding and ngModelChange. as a sidenote you can also use [value]="vendor.small" instead of value="{{vendor.small}}. with [ ] we bind the variable.

<md-select [ngModel]="selectedVendor" (ngModelChange)="vendorUpdate($event)">
   <md-option *ngFor="let vendor of vendors" [value]="vendor.small">
      {{vendor.caps}}
   </md-option>
</md-select>

TS:

vendorUpdate(value) {
  this.selectedVendor = value;
  console.log(this.selectedVendor);
}

answered Jul 28 '17 at 14:59

AT82

71,416
24
140
167

Thanks AJT_82 , I had queries would be grateful for explanation, I know () is for view to model and [] for model to view , [ngModel] what is the exact functionality and the second is on calling a function like here vendorUpdate() , is it necessary to pass event if I want value inside my function – Enthu Jul 28 '17 at 15:33
One more query if I use [(ngModel)] along with (ngModelChange) it works , so what difference will it make when using [ngModel] and (ngModelChange) THANKS – Enthu Jul 28 '17 at 15:38
`[]` is from model to view, that is correct `()` is events. And yes, in this case it's necessary to pass `$event` to get the new value. with `[( )]` you are capturing the value **and** event at the same time, that is how it works. Reading this can probably help better understanding :) https://stackoverflow.com/questions/35944749/what-is-the-difference-between-parentheses-brackets-and-asterisks-in-angular2/35945054#35945054 – AT82 Jul 28 '17 at 15:39

Pankaj Parkar · Answer 2 · 2017-07-28T15:41:56.000

2

You don't need ngModelChange actually, if you don't want to do any dependent operation, [(ngModel)] will do rest of the thing (two way binding).

<md-select id="vendorVariable" class="vm-select-wrap" [(ngModel)]="selectedVendor" placeholder="AWS" name="vendorVariable">
  <md-option *ngFor="let vendor of vendors" [value]="vendor.small">
    {{vendor.caps}}
  </md-option>
</md-select>

Demo Here

edited Jul 28 '17 at 15:41

answered Jul 28 '17 at 13:51

Pankaj Parkar

134,766
23
234
299

1

Otherwise good, but the first part, ngModelChange won't work, since it's a select and `vendor` is outside the loop. I know you know this but I thought you'd want to correct it :) – AT82 Jul 28 '17 at 15:08
@AJT_82 silly me :D I updated my answer, Thanks for heads up :) – Pankaj Parkar Jul 28 '17 at 15:17
1

No problem, it's Friday after all, so it's totally acceptable to be a little tired :D – AT82 Jul 28 '17 at 15:18
@Harsh for .beta1 `floatPlaceholder` was `floatingPlaceholder`, since beta.2 it got changed to `floatPlaceholder`, check [changelog](https://github.com/angular/material2/blob/master/CHANGELOG.md#breaking-changes-from-beta1) – Pankaj Parkar Jul 28 '17 at 15:59

ngModel shows previous value selected on md-select

2 Answers2