3

I have using one third party dropdown and calender component, if i change value ngmodel value is updating wrongly. It has to take current value instead of this it takes old value

sample: ngmodel not updating

How to update current value to ngmodel..? Please suggest good answer

Reproducing procedure:

1.run sample link

  1. change drop-down value or calendar value

3.see console log, current value is taken using argument but ngmodel shows old value

Html file

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

<ejs-datepicker id="date" (change)="onChange($event)" [(ngModel)]="ModelDate"> </ejs-datepicker>

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (change)="onDropChange($event)"></ejs-dropdownlist>

{{ModelDate}}

ts file

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public ModelDate : any ;


  public data: string[] = [ 'Badminton', 'Basketball', 'Cricket', 'Football' ];
    // set a value to pre-select
    public Modelvalue: string = 'Badminton';

  onChange(args){
    // debugger         
      console.log("NgModelvalue:" + this.ModelDate);    
     console.log("Selected value:"  +args.value);
  }
  onDropChange(args){
    debugger
    // args.dataBind();
    console.log("NgModelvalue:" + this.Modelvalue);    
     console.log("Selected value:" +args.value);
  }
}
Pac0
  • 21,465
  • 8
  • 65
  • 74
Kumaresan Sd
  • 1,399
  • 4
  • 16
  • 34

4 Answers4

2

This is expected behaviour and it's connected to the change event. Basically when the change event is fired the event part of ngModel isn't updated yet.

Basically you need to use (ngModelChange) separately with [ngModel].

See more here: https://github.com/angular/angular/issues/3406

and here: Angular 2 change event - model changes

filipbarak
  • 1,835
  • 2
  • 17
  • 28
  • the fact that you are new to Angular doesn't prevent you from taking some time to study what is given and try to understand it by yourself before asking for more precision (for a couple of hours instead of one minute) – Pac0 Sep 21 '18 at 09:34
  • OKay @Pac0, but still i didn't get clear view about my sollution.! – Kumaresan Sd Sep 21 '18 at 09:37
1

Replace the (change) function with (ngModelChange) function. Because updating model value is taking a bit more time and log gets printed prior.

Try this - 

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>

It will print data whenever model value gets change.

Anshu Bansal
  • 344
  • 2
  • 4
1

For your dropdown you have used change() event. instead of change use ngModelChange(). by using ngModelChange your ngModel will update.

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>
Sandipsinh Parmar
  • 86
  • 4
0

What you used till now?Can you please show me some code? I think property binding or two way binding [()] will solve your prbolem

Dnyaneshwar123456
  • 70
  • 12