Dividing Pages To Components Properly In Angular

I have the following folder structure in my project: I have a list-page and there are some operations e.g. create, update and delete performed via a modal dialog. In this scene, I

Solution 1:

I think you are going in right way and here are my thoughts

I think there is no need to create a separate pages for each component..

Yeah, no need to create separate component for each operation.

how should I organize these pages and components?

Create components like below structure (I mean single component for all the actions) :

|-- home
     |-- components
         |-- form-operations | .html & .ts & .scss

     |-- pages
         |-- list | .html & .ts

Here we can use the form-operations (name could be better one) components for multiple use cases like Create, Update and Delete by using @Input.

Design the Component something like the way in this stackBlitz

Edit :

Please try to follow this material stackBlitz for more info about calling matDialog.

We can use the editMode to differentiate between the actions in the dialog component (in this case Hello Component).

const dialogRef = this.dialog.open(HelloComponent,{
  data: {
     editMode: this.editMode
  }
 });

 dialogRef.afterClosed().subscribe((confirmed: boolean) => {
  console.log("closed the dialog");
 });

P.S: you can remove this in app.component.html

<div *ngIf="editMode"><form-operations [editMode]="editMode"></form-operations></div>