ngModel, update value in child component with cancel option

Question

I have this table at parent component:

<tbody>
  <tr *ngFor="let user of arrUsers">
     <td>
         <app-popupuser [user]=user id="{{user._id}}"></app-popupuser>
         {{user.name}}
     </td>
     <td>
          <span (click)=open_user(user._id)>Open User</span>
     </td>
   </tr>
</tbody>

In child component popupuser I have this:

<div class="bold-word">Name: </div>
<span class="show-original">{{user.name}}</span>
<span class="edit-value">
    <input [(ngModel)]="user.name" name="name" type="text">
</span>

When I update the value, everything is ok, the name is upadated on the db and on the front-end of both parent and child component. My problem is that i cannot find a way to cancel the update.

For example if i change the value of the name in the input, because of the ngModel the value will change on the front end of the parent component.

How can i cancel the changes of the popupuser so when i close the popup the name at the front end of parent component will go back to the original value.

I guess that there are ways to do that but I would like a solution (of course if possible) where i could get back the whole user, and not have to deal with each field of the user object

Answer 1

In your child component, in ngOnInit use Object.assign to copy the inserted user and bind it to your child component template. This way, the original user won't have any affect.

Something like this:

@Input() user: User;
innerUser: User;

ngOnInit() {
   this.innerUser = new User();
   Object.assign(this.innerUser, user);
}