0

I'm in Angular group project and I'm trying to implement delete functions for current workspace but I'm not sure how to do that. Any suggestion or help on how to do that?

Inside add-workspace.HTML file, I have a button that display a dialog box (delete-workspace-dialog).

Inside delete-workspace-dialog components file and there is a delete button. I'm trying use that button to delete current workspace.

Inside delete-workspace.dialog.ts file aka delete dialog box

export class DeleteWorkspaceDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<DeleteWorkspaceDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit(): void {
  }
  onNoClick(): void {
    this.dialogRef.close();
  }

  onDeleteClick(): void{
    // Delete workspace here

  }


}

I'm trying to use that "Yes,Delete it" button to delete the current workspace

1 Answers1

0

Hope the below snippet might help:

In Delete pop up component:

import { WorkspaceService } from 'src/app/core/services/workspace.service';
export class DeleteWorkspaceDialogComponent implements OnInit {
constructor(
 public dialogRef: MatDialogRef<DeleteWorkspaceDialogComponent>,
 @Inject(MAT_DIALOG_DATA) public data: any,
 private workspaceService: WorkspaceService) { }
ngOnInit(): void {
}
onNoClick(): void {
  this.dialogRef.close();
}
onDeleteClick(): void{
  // Delete workspace here
  this.workspaceService.deleteWorkspace(data.workspace).subscribe(response=>{
    // Do some logic and close the popup
    this.dialogRef.close();
  },error=>{
   // Error handling and close the popup
   this.dialogRef.close();
  })
 }
}

From parent component to open delete popup:

HTML:

<button (click)="delete()">Delete</button>

TS:

delete(){
 this.dialog.open(DeleteWorkspaceDialogComponent,{
    data: {
        workspace: this.workspace
    }
 });
}

Here you are passing the work space to be deleted and in delete popup, you are calling the service to delete the work space.

Hope it will help.

Anoop Rajasekhara Warrier
  • 1,010
  • 3
  • 15
  • Hi Anoop. thanks for the help but can you also help me more with the logic part. I'm trying everything I know but still can't get to work. –  Apr 01 '20 at 15:12
  • The delete operation ideally should be through an API call. This you need to implement in the service file - "workspaceService". – Anoop Rajasekhara Warrier Apr 01 '20 at 15:16
  • I'm not sure what to do so I copy exactly like createWorkspace for right now and just change the title in my workspace.service.ts file, =====> createWorkspace(workspace: Workspace) { return this.http.post(`${environment.api.chart}/workspaces`, workspace).pipe(first()); } deleteWorkspace(workspace: Workspace){ return this.http.post(`${environment.api.chart}/workspaces`, workspace).pipe(first()); } } –  Apr 01 '20 at 15:19
  • yes, On confirmation, you need to call the deleteWorkspace(). this.workspaceService.deleteWorkspace(workspace).subscribe(response=>{},error=>{}); – Anoop Rajasekhara Warrier Apr 01 '20 at 15:22
  • Oh ok.. After adding that I got an error on workspace but I added this ( workspace: Workspace) on the top so hopefully it work.Currently the server are down and I can't test the code so I'll let you know in a bit. –  Apr 01 '20 at 15:35
  • okay... Ideally its how it should be implemented. I don't know the business you are looking for. Please try. – Anoop Rajasekhara Warrier Apr 01 '20 at 15:36
  • it's not working yet so please can you help me with the logic part too?. –  Apr 01 '20 at 23:29