Angular Dialog "Popup" Edit data

Question

I am trying to create a "config" page of sort, and I have a few areas where a user will "add" an object/device. This opens a Dialog window, with that "object's" properties/fields. There is also a Save and Cancel button. When the user hits Save, it works and adds it to the array/list, and displays all of the added objects as such. Within the component for each array item, I also have an edit button. This Edit button brings up the same dialog window. Here my goal is for the user to "edit" the data, without making a real time change to the list object, until "save" is pressed.

I have this working if I just pass a single property back and forth (IE object.name), Since I want to re-use this logic, I want to pass the object as a whole, and by pass I mean to essentially make a copy of the original, when they hit edit button, make "edits" to the copy in the dialog, then when they hit save. it takes the "copy" and passes it back to the original, thus changing the object in the list.

Like I said, Adding to the list isn't a problem, it is "editing" where I am stuck. I will also add, I am fairly new to the world of angular and javascript/typescript, but have experience in some OOP (Object-Oriented)

I have this working once again If I just do a single property (First bit of code)

//This works as RoomGroup only has a name property.
export class RoomGroupDialogComponent implements OnInit {

  tempGroup: ConfigRoomGroup;
  newGroup = true;

  constructor(public diaglogRef: MatDialogRef<RoomGroupDialogComponent>,
              @Inject(MAT_DIALOG_DATA) private group: ConfigRoomGroup,
              public config: ConfigService) { }

  ngOnInit() {
    if (this.group.name) {
      this.newGroup = false;
    } else {
      this.newGroup = true;
      this.group.name = 'New Group';
    }
    this.tempGroup = Object.assign({}, this.group);


  }
  onSaveClick(): void {

    if (this.newGroup) {
      this.config.configData.roomSetup.groups.push(this.tempGroup);
    } else {
      this.group.name = this.tempGroup.name;
      console.log(this.group);
    }

    this.diaglogRef.close();
  }

  onCancelClick(): void {
    this.diaglogRef.close();
  }

}
///This does not work
export class RoomDialogComponent implements OnInit {

  tempRoom: ConfigRoom;
  newRoom = true;

  constructor(public dialogRef: MatDialogRef<RoomDialogComponent>,
              @Inject(MAT_DIALOG_DATA) private room: ConfigRoom,
              public config: ConfigService) { }

  ngOnInit() {
    if ( this.room.name) {
      this.newRoom = false;
    } else {
      this.newRoom = true;
      this.room.name = 'New Room';
    }

    this.tempRoom = Object.assign({}, this.room);
  }

  onSaveClick(): void {
    if (this.newRoom) {
      console.log(this.tempRoom);
      this.config.configData.roomSetup.rooms.push(this.tempRoom);
    } else {
      this.room = this.tempRoom;
      console.log(this.tempRoom);
      console.log(this.room);
      console.log(this.config.configData.roomSetup.rooms);
    }

    this.dialogRef.close();
  }

  onCancelClick(): void {
    this.dialogRef.close();
  }
}

G. Tranter · Accepted Answer · 2019-07-23 21:23:31Z

2

This is a common problem in Javascript because objects are passed by reference not value. So the room and group properties passed into the constructors are pointers to objects not the objects themselves. When you set the value of an object's property you affect the property in the original object, but when you set the object value - that is the value of the pointer to an object, you are pointing to something else, and any other pointers to the original object, such as the one that was used to pass the object to the dialog, remain pointing at the original object. So the original object is never changed. That's what Object.assign() is for (as you know because you are already using it to create your temporary working data objects). So you need to change how you 'save' from:

this.room = this.tempRoom;

to

Object.assign(this.room, this.tempRoom);

answered Jul 23, 2019 at 21:23

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angryjames Over a year ago

Perfect, that makes sense now, I will give this a try.

Angryjames Over a year ago

G. Tranter - Thank you, it initially didn't work, at which point I remembered, I added the Object.assign logic to the function passing my data to the dialog (in trying to figure this out). So It was passing a "fresh object" to what I thought was the "original", So after implementing your suggestions, and fixing my test logic, it worked great. Thanks again. I now understand it in greater depth.

Collectives™ on Stack Overflow

Angular Dialog "Popup" Edit data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related