Because my @Input works as if it were an @Output with ngModel

Hi,

I don’t understand why the fix that I modify and close modal saves the changes when it is not supposed to save, since I didn’t commit, and I still have a conditional to submit change:

Video error Google Drive or Reddit

Video Reddit
It won’t let me upload videos like reddit, sorry.

As you can see in the video I am not saving the changes, but it is still saving it and I don’t know if it is because of ngmodel or what is the cause.

userListResult:UserAssignment[]= [];
@Input() users: UserAssignment[]= [];
//  If the @input is empty query the service 
 async ngOnInit() {
    if (this.users.length === 0) {
      await this.userList();
    } 
  }

Then with a dynamic ngFor return the array of the service or @ input

   getArray(): any[] {
    if (this.users.length === 0) {
       return  this.userListResult;
    }else {
       return  this.users;
    }
  }

Where I use it as follows

<app-modal-header [isCloseButton]="true">
  <ion-title color="primary">Seleccionar usuarios</ion-title>
</app-modal-header>
<ion-content>
  <ion-list>
    <ion-list-header>Seleccione usuarios</ion-list-header>
    <ion-item *ngFor="let user of getArray()">
      <ion-label>{{ user.names }}</ion-label>
      <ion-checkbox 
      [(ngModel)]="user.selected"
      [ngModelOptions]="{ standalone: true }"
      color="primary" 
      checked slot="start">
    </ion-checkbox>
    </ion-item>
    <section class="full-width">
      <ion-button expand="full" color="secondary" (click)="saveSelectUsers()">Confirmar</ion-button>
    </section>
  </ion-list>
</ion-content>

This is where you sent the fix to the parent component

  saveSelectUsers() {

    this.modalController.dismiss(this.userListResult);

    //If it did not send data, it was still storing
    //this.modalController.dismiss();

  }

And I receive it as follows:

users: UserAssignment[]= [];

async selectUsers(users: UserAssignment[]) {
    
    console.log(this.users)

    const modal = await this.modalController.create({
      component: UsersListComponent,
      breakpoints: [0.1, 0.5, 1],
      initialBreakpoint: 0.5,
      componentProps: {
      users
      }

    });

    await  modal.present();

    const {data} = await modal.onDidDismiss();
    console.log(data)
    if (data != undefined || data != null) {
      this.users = await data;
    }


  }

I hope you can help me.

Hi
I think the redit people gave good feedback - you are passing reference which basically mutes the data in places where you don’t want to.

At least, that is where I would look at - for instance by forcing a clone for all the data passing to/from the modal. This might isolate where it hurts