viewDateChange fired before viewDate is updated

changing the order of these yeilds the wrong date

    <div
        class="btn btn-primary"
        mwlCalendarPreviousView
        (viewDateChange)="fetchEvents()"
        [(viewDate)]="viewDate"
        [view]="view"
      >
        Previous
      </div>

Hit next and check console log

https://stackblitz.com/edit/angular-kcqaxw?file=demo%2Fcomponent.ts

Screenshots

Versions

"angular-calendar": "0.28.1",
"angular-calendar": "0.28.1",

chrome 79

[mattlewis92]

This is just how angular works, there’s nothing I can do my end to fix this. Another possible workaround is to do (viewDateChange)="fetchEvents($event)" where $event will contain the new date

[mjtrjk]

work around … setTimeout(() => console.log('delay', this.viewDate), 10);

you could even change the order to

[(viewDate)]="viewDate"
(viewDateChange)="fetchEvents()"

this is caused by Angular´s banana-in-a-box syntax sugar -> https://angular.io/guide/template-syntax#two-way-binding-

Code formater rearranges order so this is problematic assuming order

You can then de-sugar it yourself.

[viewDate]="viewDate"
(viewDateChange)="viewDate = $event; fetchEvents()"