How to refresh the table/re-route to the page after deleting

Issue

So I have a delete button on this page in a table. Whenever I hit the trashcan icon, it deletes in the backend, but I also want to delete it on the view. I tried to retrofit ngModel approach, but I couldn't do it; this is my first time in angular. So help would be great.

cart.component.ts

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  responsd: ViewCart[];
  respons: string;
  em: ViewCart[];
  total: number = 0;
  numb: number=12315;
  constructor(private apiControl: ApicontrolService, private router: Router) { }

  ngOnInit(): void {
    this.populateTable();

  }
  async populateTable(){
    this.total=0;
    this.apiControl.getallcart(this.numb).subscribe(
      res=>{
        this.responsd=res;
        console.log("response from cart",this.responsd);
      }
    );
    await new Promise(f => setTimeout(f, 1000));

    for(let em of this.responsd){
      this.total =this.total+em.price;
    }
    console.log("total:", this.total);
  }
  deleteItem(orderid){
    this.apiControl.deleteCartItem(orderid).subscribe(
      res=>{
        this.respons=res;
        console.log("response from cart",this.respons);
      }
    );
    //=====
    this.router.navigate(['components', 'cart'] );
}
}

cart.component.html

<p>
    <mat-toolbar>
    <span>Airtel Recharge Portal</span>
    <span class="example-spacer"></span>
    <div>
        <h3 class=".md-title">Welcome Mr.       </h3>
    </div>

  </mat-toolbar>
</p>
<p>cart works!</p>
<div>
    <table class="table table-hover">
        <thead>
            <th>Pack Name</th>
            <th>Cost</th>
            <th>  </th>
        </thead>
        <tbody>
            <tr *ngFor="let cart of responsd">
                    <td>{{cart.packName}}</td>
                    <td>{{cart.price}}</td>
                    <td>
                        <button type="button" class="btn btn-outline-dark" (click)="deleteItem(cart.orderId)">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                              </svg>
                       </button>
                    </td>
            </tr>
            <tr>
                <td>Total:</td>
                <td>{{total}}</td>
            </tr>
        </tbody>
    </table>    
</div>

Solution

All you need to do is refresh the grid again, after the deletion happens! I have added other changes, switchMap will execute another observable, after the previous one completed, so first delete and then refresh. Then tap will assign the grid data to the variable without putting it in the subscribe. Please let me know if any doubts.

@Component({
    selector: 'app-cart',
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {
    responsd: ViewCart[];
    respons: string;
    em: ViewCart[];
    total: number = 0;
    numb: number = 12315;
    constructor(private apiControl: ApicontrolService, private router: Router) {}

    ngOnInit(): void {
        this.populateTable().subscribe();
    }
    async populateTable() {
        this.total = 0;
        return this.apiControl.getallcart(this.numb).pipe(
            tap(response => {
                this.responsd = res;
                for (let em of this.responsd) {
                    this.total = this.total + em.price;
                }
                console.log('total:', this.total);
            })
        );
    }

    deleteItem(orderid) {
        this.apiControl
            .deleteCartItem(orderid)
            .pipe(switchMap(() => this.populateTable))
            .subscribe(() => {
                this.router.navigate(['components', 'cart']);
            });
        //=====
    }
}

Answered By - Naren Murali