ion datetime component persist value across different components

i have a very strange problem where i am using ion-datetime component on component inside a model component. From this component, I call another component in a model that also has an ion-datetime component. the problem is that the value set in the ion-date time on first model stays when I go the component launched from it.

here is how it looks like:

Edit Asset Component

<ion-row>
<ion-col>
<ion-label>Purchase Date</ion-label>
</ion-col>
<ion-col>
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="datetime" presentation="date" [preferWheel]="true" [showDefaultButtons]="true" (ionChange)="reDateChanged($event)" [(ngModel)]="calcStartDate"></ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
</ion-row>

calcStartDate:string
reDateChanged(e:any) {
this.calcStartDate = e.detail.value
}

async addExpense(){
const modal = await this.modalCtl.create({
component: AddExpenseComponent,
componentProps: {
"expenseType": this.assetType,
"doNotCommit": true,
"parentKey": objectKey,
"mode": "add"
}
})

modal.present();
const { data, role } = await modal.onWillDismiss();
}


AddExpenseComponent

<ion-row>
<ion-col>
<ion-label>Date</ion-label>
</ion-col>
<ion-col>
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="datetime" presentation="date" [preferWheel]="true" [showDefaultButtons]="true" (ionChange)="dateChanged($event)" [(ngModel)]="calcStartDate" (ngModelChange)="calcStartDate"></ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
</ion-row>

calcStartDate:string //expense start date

dateChanged(e:any) {
this.calcStartDate = e.detail.value
}


So the date on "Edit Asset" is set to jan 1 2013. Now when I launch the model from this page the "Add expense" model shows the same date too..

Continue reading...