Binding with ngModel angular dialog

Question

I have a project that I can edit with dialog angular, but the problem is when I open the edit dialog what is changed automatically shows me in my UI I want to change after I save because if I change and click cancel that stays changed. Below you can find a code when i inject data and save. What I change in dialog immediately overwrites changes, I wan'T after I save these will change.

Here is the dialog when it will open for edit.

 openprojecteditdialog(project) {
 this.dialog.open(ProjectEditDialogComponent, {
  data: project, disableClose: true});
 }

This is the template of edit dialog:

<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Project">
  <div id="general-content">
    <mat-input-container>
      <label>*Name</label>
      <input placeholder="" matInput [(ngModel)]="project.name">
    </mat-input-container>
    <br>
    <mat-input-container>
      <label>*Type</label>
      <mat-select class="tab-content-item" placeholder="" matInput 
   [(ngModel)]="project.type">
        <mat-option *ngFor="let type of projectsType; let i = index" 
  [value]="i">
          {{type}}
        </mat-option>
      </mat-select>
    </mat-input-container>
    <br>
    <mat-input-container>
      <label>*State</label>
      <mat-select class="tab-content-item" placeholder="" matInput 
  [(ngModel)]="project.state">
          <mat-option *ngFor="let state of projectsState; let i 
 =index" [value]="i">
          {{state}}
        </mat-option>
      </mat-select>
    </mat-input-container>
  </div>
 </mat-tab>
 </mat-tab-group>
 </mat-dialog-content>
 <mat-dialog-actions>
  <button mat-button mat-dialog-close (click)="save()" 
 [disabled]="project.name.length === 0">Save</button>
 <button mat-button mat-dialog-close>Cancel</button>
 </mat-dialog-actions>

This is the TS file of edit dialog.

export class ProjectEditDialogComponent implements OnInit {

readonly projectsState = ProjectState;
readonly projectsType = ProjectType;
readonly level: string[] = [];
working = false;
newType = '';
newState = '';
constructor(
public store: Store<ApplicationState>,
public dialogRef: MatDialogRef<ProjectEditDialogComponent>[],
@Inject(MAT_DIALOG_DATA) public project: any) {
}
ngOnInit() {
}
save() {
if (this.project.name.length > 0) {
  this.working = true;
  this.project.ProjectType = this.newType;
  this.project.ProjectState = this.newState;
  this.store.dispatch(new UpsertProjectInternalAction(this.project));
}
}
}

Answer 1

You are passing the reference of original project in edit dialog. So it will reflect the changes even if you don't save. Create the copy of project data so that it will not reflect with original project . And after save update the field which you want of original project.

openprojecteditdialog(project) {
  let editProject = Object.assign({}, project);
  this.dialog.open(ProjectEditDialogComponent, {
  data: editProject, disableClose: true});
}

and save function will be

save() {
  if (this.editProject.name.length > 0) {
   this.working = true;
   this.project.ProjectType = this.editProject.newType;
   this.project.ProjectState = this.editProject.newState;
   this.store.dispatch(new UpsertProjectInternalAction(this.project));
  }
}