Home / Questions / 354313
Accepted
Andrés Ucero
Asked: 2020-05-11 08:23:20 +0800 CST 2020-05-11 08:23:20 +0800 CST

Angular 9 How to refresh the index of a crud, once an element has been deleted?

  • 772

Very good, I have a crud of administrators in angular 9, which makes requests to an API, when deleting an admin, a confirmation modal is displayed, when accepting, the admin is successfully deleted, but I have to refresh the screen so that it is can observe the changes, the information travels in the following way:

index -> admin-card -> delete-modal

in the index.ts I have the following:

  constructor(private adminService: AdminService) {
    this.adminService.readAdmin()
    .subscribe(
        response =>{
            this.adminsLoading=false; 
            this.adminList=response;
        });
  }

That 'adminList' is an array that is passed to the child component (admin-card) in the index view, example (index.html):

<div *ngFor="let admins of adminList" fxFlex="32" fxFlex.lt-md="100" fxFlex.lt-sm="100">
    <app-admin-card [admin]="admins" class="mat-elevation-z2"></app-admin-card>
</div>

Then, in the admin-card component, the 'admin.id' (from the admin-card.html) is sent to the modal to remove the admin. This is the method I have in admin-card.ts:

 openDeleteDialog() {
        const dialogRef = this.dialog.open(DeleteModalComponent,{
        data: {
          adminData: this.admin
        }
      });

Later, the info is sent to the modal which has two buttons (cancel and confirm), when clicking on confirm, deleteAdmin() is executed, I attach the function code:

  deleteAdmin(){
    let id = this.data.adminData.id;
    let password = this.firstFormGroup.value.pass;
    this.adminService.deleteAdmin(id, password)
    .subscribe(
      response => {
        console.log(response)
        this.closeDialog();
        this.snackBar.open(
          'Administrador eliminado satisfactoriamente', 'Cerrar', {
            duration: 3000
          })
      },
      error => {
        console.log(error)
        this.closeDialog();
        this.snackBar.open(
          'Se ha producido un error', 'Cerrar', {
            duration: 3000
          })
      }
      );
  }

and finally, I attach the code of the function that makes the request to the API to remove the admin (admin.service.ts):

deleteAdmin(id: number, password){
    return this.http.delete(environment.url+'/admins/'+id, password);
}
javascript

2 Answers

  1. Best Answer

    Due to the design of your application, for me, the most convenient thing would be for you to declare a EventEmitterin your service and subscribe from the component that you want to refresh.

    Only this line would suffice in your service

     cambio = new EventEmitter<boolean>()

    And from where you want to detect the change you inject your service, as before and you subscribe to the property in this way:

     this.usuarioService.cambio.subscribe(cambioOError=>{

      if(cambioOError){ 
        //... Tu logica
      }
    })

    I use "changeOrerror" just for example, but actually you can let it execute your logic as soon as something is detected, without ifit, this is up to you. It is also possible to pass other data.

    Here is a working example

    • 1

  2. Maybe the change detector can help you, in certain cases when this does not happen you have to use the detectChanges method of the ChangeDetectorRef class, (more info here https://angular.io/api/core/ChangeDetectorRef )

    You just need to inject the ChangeDetectorRefand then call the method detectChanges();when you're done fetching and assigning your data to your observable's subscription.

    constructor(private cd: ChangeDetectorRef) {}

deleteAdmin(){
    let id = this.data.adminData.id;
    let password = this.firstFormGroup.value.pass;
    this.adminService.deleteAdmin(id, password)
    .subscribe(
      response => {
        console.log(response)
        this.closeDialog();
        this.snackBar.open(
          'Administrador eliminado satisfactoriamente', 'Cerrar', {
            duration: 3000
          })

        // Aquí se forza el redibujado de la app
        this.cd.detectChanges();


      },
      error => {
        console.log(error)
        this.closeDialog();
        this.snackBar.open(
          'Se ha producido un error', 'Cerrar', {
            duration: 3000
          })
      }
      );
  }

    Also here is a great explanation of the change detection strategy that Angular uses https://alligator.io/angular/change-detection-strategy/

    The same would not hurt if you give a review to the architecture of your application so use detectChanges(), despite being a very useful tool it is not highly recommended because you are "overloading" your app and the performance of your app can be seen considerably affected.

    • 0