How to make angular material table refresh after every modification

Question

im currently working on an angular project involving a categories table.
the user can create, read, update & delete categories through the table using either components i added or components from the angular material module.

Here's my html code:

<main>
  <nav class="navbar navbar-light bg-success" (click)="this.openCreate()">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="fa-solid fa-file-circle-plus"></i> Add Category</a>
    </div>
  </nav>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <mat-form-field appearance="fill" class="container-fluid">
          <input title="Filter" matInput placeholder="Filter.." autocomplete="off" (keyup)="filterData($event)">
        </mat-form-field>
        
        <table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8 container">
          
          <!-- Position Column -->
          <ng-container matColumnDef="id">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Id. </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>
        
          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
        
          <!-- Weight Column -->
          <ng-container matColumnDef="description">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Description </th>
            <td mat-cell *matCellDef="let element"> {{element.description}} </td>
          </ng-container>
        
          <!-- Symbol Column -->
          <ng-container matColumnDef="createdat">
            <th mat-header-cell mat-sort-header *matHeaderCellDef> Created At </th>
            <td mat-cell *matCellDef="let element"> {{element.createdat}} </td>
          </ng-container>

          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef> Actions </th>
            <td mat-cell *matCellDef="let element">
              <button title="Edit" type="button" class="btn btn-success"(click)="this.edit(element.id)"><i class="fas fa-edit"></i></button>
              <button title="Delete" type="button" class="btn btn-danger" (click)="this.delete(element.id)"><i class="far fa-trash-alt"></i></button>
            </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator #paginator
        [pageSize]="5"
        [pageSizeOptions]="[5, 10, 25, 100]">
        </mat-paginator>

        
      </div>
    </div>
  </div>
</main>

and here's my component.ts file:

export class CategoriesComponent implements OnInit {
  //TABLE CONTENT
  displayedColumns= ['id', 'name', 'description', 'createdat', 'actions'];
  dataSource!:MatTableDataSource<any>;

  //VARIABLES
  addCategorycheck:boolean = false;
  isEditing:boolean = false;

  @ViewChild('paginator') paginator!: MatPaginator;
  @ViewChild(MatSort) matSort!: MatSort;

  constructor(private categoriesAPI: ApiService, public router: Router, private dialog: MatDialog){}

  ngOnInit(): void {
    this.getCategories();
  }

  filterData($event: any)
  {
    this.dataSource.filter = $event.target.value;
  }


  // GETS CATEGS
  getCategories(): void{
    this.categoriesAPI.getCategories().subscribe((response) =>{
      this.dataSource = new MatTableDataSource(response);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.matSort;
    })
  }


  // CREATES CATEGS
  openCreate(){
    this.dialog.open(AddcategoryComponent, {
      data:{
        test: 'dwwdwdw'
      }
    });
  }


  // DELETES CATEG
  edit(id: number){
    this.dialog.open(CategoryComponent, {
      data:{
        id: id
      }
    });
  }

  // DELETES CATEG
  delete(id: number){
        Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          if (result.isConfirmed) {
            this.categoriesAPI.deleteCategory(id).subscribe(() => {});
            Swal.fire({
              position: 'top-end',
              icon: 'success',
              title: 'Your work has been saved',
              showConfirmButton: false,
              timer: 1500
            })
          }
        })
  }

}

you don't really have to read it to understand my question, its just here for context
anyway my question is : is it possible to make the table auto refresh after every operation done by the user? because currently the changes only happen in the database and the user has to manually reload the whole page in order to see changes.

i also dont want to reload the whole page using window.location.reload, i only want to load the table if thats possible.

Please let me know if you have any idea. Thanks

Answer 1

If i correctly understood you, you want to recreate your table after any user operation (edit/delete); Just call getCategories() method after every operation that user done.

edit(id: number){
this.dialog.open(CategoryComponent, {
  data:{
    id: id
  }
});
 //in the end of method
 this.getCategories();  
}

Also in delete:

delete(id: number){
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        this.categoriesAPI.deleteCategory(id).subscribe(() => {
         // here after subscribing on deleteCaterogy;
         this.getCategories();
         });
        Swal.fire({
          position: 'top-end',
          icon: 'success',
          title: 'Your work has been saved',
          showConfirmButton: false,
          timer: 1500
        })
      }
    })
  }