Passing independent data to modal ng Model

Hi everyone!

I’m having an issue with my ngModels inside a Ionic 4 modal.

Basically im trying to set the ngModel scope inside a modal to be equal to the value i’m passing through the “componentProps” property of the modal. And the value im passing comes from a function in a ngFor item.

The problem is that the value or item from the ngFor that im passing in the function, keeps been binded to the array, so when i edit the ngModel inside an input in the modal, and i dismiss the modal, the item changes also in the ngFor. It should be independent so i can change it if i want.

<ion-card *ngFor="let student of students | filters:{ text: searchText }" (click)="studentAction(student)" >

      <p><b>Padre:</b> <br> {{student.father}}</p> 
async studentAction(student) {

    const modal = await this.modalController.create({
      component: StudentActionPage,
      componentProps: student ? { student } : undefined

    modal.onDidDismiss().then((data) => {
    return await modal.present()
const studentModel : any = this.navParams.get('student');
this.studentModel = studentModel;
      <ion-label position="floating">Nombre completo</ion-label>
      <ion-input type="text" name="name" [(ngModel)]=""></ion-input>
      <ion-label position="floating">Nombre del padre</ion-label>
      <ion-input type="text" name="father" [(ngModel)]="studentModel.father"></ion-input>

Any idea what is happening?

Then you’re going to have to make it so. I use lodash.cloneDeep for this.

Thanks, i used Object.assign(student) and worked!