How to notify parent component using observable in child component Angular?

Question

There is this father component 'SalesListComponent'

<div class="container">
    <div>
        <h3>Total Venda: R${{totalCashierDay}}</h3>

        <div *ngFor="let sale of salesListAggrouped" class="saleCard">
            <app-modal-receipt [sales]="sale"></app-modal-receipt>            
        </div>

    </div>
</div>

It renders lots of child component 'ModalReceiptComponent' that I use in more than one place.

Visualization on that (red: parent component, green: child component)

enter image description here

I am trying to learng observer and using this approach

export class HubService {
  sales_list: sales[] = [];
  
  constructor() { 
    this.sales_list = getCachedSales();
  }

  getSales() {
    const sales = of(this.sales_list);
    return sales;
  }

  addSale(sale: sales) {
    this.sales_list.push(sale);
    saveCacheSales(this.sales_list);
  }

  addSales(sale: sales[]) {
    this.sales_list = this.sales_list.concat(sale);
    saveCacheSales(this.sales_list);
  }

  editSales(sales: sales[]){
    this.sales_list = sales;
    saveCacheSales(this.sales_list);
  }

  deleteSales(sales: sales[]){
    this.sales_list = this.sales_list.filter(x => x.idDate !== sales?.[0]?.idDate);
    this.editSales(this.sales_list);
  }

A service to deal with CRUD in sales list using the 'of' observer approach.

In 'sales-list-component.ts' just subscribe the prop list in constructor

export class SalesListComponent {
  salesList: sales[] = [];
  
  constructor(public dialog: MatDialog, private hubService: HubService) {
    this.hubService.getSales().subscribe(sales => {
      this.salesList = sales;
    });
  }

In 'modal-receipt-component.ts' I use the delete method in click event

deleteSales(){
      this.hubService.deleteSales(this.sales);
      window.location.reload();
    }
  }

The problem is that without reloading the entire page, I cannot identify the event of salesList update and 're-render' father component to update the new salesList without the record was deleted.

Someone can help me?

Until now, only window.location.reload() have resolved.

Answer 1

Don't use of, use Subject or BehaviorSubject in your service. It allows you to emit values and have components subscribe to it:

  private salesSubject = new BehaviorSubject<sales[]>(this.getSales());

  addSale(sale: sales) {
    this.sales_list.push(sale);
    saveCacheSales(this.sales_list);
    this.salesSubject.next(this.sales_list);
  }

As others have pointed out, don't use window.location.reload() to refresh the entire page, we have Angular to pick what needs to change and change them only