Angular - Table not updating after confirming deletion in dialog

user_17164256 0
Viewed 55

Can someone please help, I have encountered this issue - after confirming the deletion the table data doesn't update. Deletion works, but I don't want to refresh the page all the time.

I have tried to subscribe and unsubscribe in table component, adding deletion function to table component, however, with no luck.

Delete compononent.ts

import { Component} from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CarService } from 'src/app/services/car.service';

@Component({
  selector: 'app-delete-car',
  templateUrl: './delete-car.component.html',
  styleUrls: ['./delete-car.component.scss']
})
export class DeleteCarComponent {

  constructor(public carService: CarService, private _snackBar: MatSnackBar) { }

  performDelete(id: string): void {
    if(id){
      this.carService.deleteCar(id).subscribe(() => {
        this._snackBar.open("Record deleted successfuly");
      }, () => {
        this._snackBar.open("Oops, something went wrong :(");
      });
    }
  }
}

delete html:

<div mat-dialog-content>
    <p>Are you sure you want to delete?</p>
  </div>
  <div mat-dialog-actions>
    <button mat-button mat-dialog-close="cancel">No Thanks</button>
    <button mat-button mat-dialog-close="delete">Yep!</button>
  </div>

Table component:

import { Component, OnInit,  ViewChild } from '@angular/core';
import { MatPaginator} from '@angular/material/paginator';
import {  CarService } from 'src/app/services/car.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Car } from 'src/app/types';
import { MatDialog } from '@angular/material/dialog';
import { DeleteCarComponent } from '../delete-car/delete-car.component';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-car-list',
  templateUrl: './car-list.component.html',
  styleUrls: ['./car-list.component.scss']
})

export class CarListComponent implements OnInit{
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  allCars: Car[];
  columnsToDisplay = ['carplate', 'ownername', 'actions'];
  dataSource: MatTableDataSource<Car>;

  constructor(private carService: CarService, public dialog: MatDialog, private _snackBar: MatSnackBar,
    public deleteCar: DeleteCarComponent) { }

  ngOnInit(){
      this.carService.allCars().subscribe(data => {
        this.allCars=data.sort((a: { car_plate: string; }, b: { car_plate: any; }) => a.car_plate.localeCompare(b.car_plate));
        this.dataSource = new MatTableDataSource(this.allCars);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

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

  openDeleteConfirmation(id: string) {
      const dialogRef = this.dialog.open(DeleteCarComponent);
      
      dialogRef.afterClosed().subscribe(response => {
        if(response == 'delete') {
          this.deleteCar.performDelete(id);
        }
      })
  }
}
angular typescript javascript
3 Answers

Ok, How about splicing the row from the table, but honestly, refresh is better I guess ( what if another person was working on the same table, in that scenario without refresh, the user will not have the latest data available to him! ).

openDeleteConfirmation(id: string) {
      const dialogRef = this.dialog.open(DeleteCarComponent);
      this.componentSubscription.add(
      dialogRef.afterClosed().subscribe(response => {
        if(response == 'delete') {
             this.carService.deleteCar(id).subscribe(() => {
                  this._snackBar.open("Record deleted successfuly");
                  const foundIndex = this.allCars.find(x => x.id === id);
                  if(foundIndex > -1) {
                       this.allCars.splice(foundIndex, 1);
                       this.dataSource = new MatTableDataSource(this.allCars);
                  }
             }, () => {
                  this._snackBar.open("Oops, something went wrong :(");
             });
        }
      })
    );
  }

Always add subscribe wrapped with subscription.

add this to the top of the component.

private componentSubscription = new Subscription();

Finally on component destroy unsubscribe all subscribe events that were called!

ngOnDestroy { this.componentSubscription.unsubscribe(); }
user_59245620

If you don't want to refresh your page, you can call your get api again. Check the following code.

import { Component, OnInit,  ViewChild } from '@angular/core';
import { MatPaginator} from '@angular/material/paginator';
import {  CarService } from 'src/app/services/car.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Car } from 'src/app/types';
import { MatDialog } from '@angular/material/dialog';
import { DeleteCarComponent } from '../delete-car/delete-car.component';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-car-list',
  templateUrl: './car-list.component.html',
  styleUrls: ['./car-list.component.scss']
})

export class CarListComponent implements OnInit{
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  allCars: Car[];
  columnsToDisplay = ['carplate', 'ownername', 'actions'];
  dataSource: MatTableDataSource<Car>;

  constructor(private carService: CarService, public dialog: MatDialog, private _snackBar: MatSnackBar,
    public deleteCar: DeleteCarComponent) { }

  ngOnInit(){
    this.getAllCars();
  }

  getAllCars() {
    this.carService.allCars().subscribe(data => {
        this.allCars=data.sort((a: { car_plate: string; }, b: { car_plate: any; }) => a.car_plate.localeCompare(b.car_plate));
        this.dataSource = new MatTableDataSource(this.allCars);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    });
  }

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

  openDeleteConfirmation(id: string) {
      const dialogRef = this.dialog.open(DeleteCarComponent);

      dialogRef.afterClosed().subscribe(response => {
        if(response == 'delete') {
          this.deleteCar.performDelete(id);
          this.getAllCars();

        }
      })
  }
}
user_192330440

I have some solution with services, let's called the refresh service.

@Injectable({providedIn: 'root'})
export class RefreshService {
  refresh = new BehaviourSubject(false);

getRefresh() {
  return this.refresh;
}

setRefresh(value: boolean): Observable<any> {
  return this.refresh.next(value)
}
}

Then on your DeleteCarComponent after this._snackBar.open("Record deleted successfully") you can add

this.refreshService.setRefresh(true);

After that, please add a new function on your CarListComponent to subscribe the data from refresh service, and don't forget to call in on init. Make sure the type of variable $refresh is Subscription.

doRefreshData() {
this.$refresh = this.refreshService.getRefresh().subscribe(response => {
 if(response) {
  this.getAllCars();
  this.refreshService.setRefresh(false);
 }  
})
}

Finally, don't forget to unsubscribe variable $refresh on destroy the component.

ngOnDestroy() {
if(this.$refresh) {
 this.$refresh.unsubsribe();
}
}
user_115265050
Related