Angular Dialog changes are overwriting always the UI

I am passing data in an Angular dialog, but in meantime when I edit something in the Dialog it overwrites the data even I didn't save them. For example I have an Object and I click ot edit it. It opens an Angular Dialog with all data of this Object.

Is it possible only to change data when I click save button. I heard about Object.assign it can be useful but didn't know how to use it. I tried with Object.assign but it didn't work. Why is not working I think that this.data holds another data as the this.data.education. See the code below This is my code of the dialog.

constructor(@Inject(MAT_DIALOG_DATA) public data: EditEducation,
              private dialogRef: MatDialogRef<EducationDialogComponent>,
              public dataService: ModelDataService) { }

  ngOnInit(): void {
    if (!this.data.edit) {
      this.data.education = {} as SubCategory;
    } else {
      ({education: this.data.education} = Object.assign({}, this.data));
    }
  }

And this is how I open the dialog.

  <ul>
    <li class="fa fa-pencil addIconTop" (click)="editEducation({edit: true, education: subCategory, model: model})"></li>
    <button (click)="addEducation({edit: false, model: model})" class="btn"><i class="fa fa-plus addIconBottom"></i></button>
    <button [disabled]="education.subCategories.length === 1" (click)="deleteSubCategory(i)" class="btn"><i class="fa fa-trash deleteIconRight"></i></button>
    <li class="fa fa-arrow-down moveIconDown"></li>
    <li class="fa fa-arrow-up moveIconTop"></li>
  </ul>

public editData(data: EditEducation) {
   this.dialog.open(DataDialogComponent, {
        data,
        });
  }
public addData(data: EditEducation) {
    this.dialog.open(DataDialogComponent, {
      data,
    });
  }

This is one interface to see if is one new Object or is need to be edited.

export interface EditEducation {
  education?: SubCategory;
  edit?: boolean;
  model?: Model;
}

from Angular Dialog changes are overwriting always the UI