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

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.