Ngmodel value is updating wrongly?

Question

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

2. 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);
  }
}

Answer 1

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

Answer 2

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.