product.service.ts
================================
 public product_url = "http://127.0.0.1:8000/api/notes"

  getProducts_(): Observable<any> {
    return this.apiService.get(this.product_url);
  }

product-list.component.ts
================================
 private refresh$ = new BehaviorSubject<void>(undefined);
  dataList$=this.refresh$.pipe(switchMap(()=>this.productService.getProducts_()))
  dataSignal = toSignal(this.dataList$)
  refreshAdd() {
    this.refresh$.next();
  }

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Product name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product_data of dataSignal(); let i = index">
      <th scope="row">{{i+1}}</th>
      <td>{{product_data.title}}</td>
    </tr>
  </tbody>
</table>