How to Reset/Reload/Refresh?call Again a toSignal() / Observable Stream with updated data in Angular?

Question

I have an Angular application using a library's toSignal() function to create a signal from an Observable stream. Here's my code snippet:

public_timeline$ = this.stream_service
  .readProfileFeed('timeline', 'public')
  .pipe(
    // ... (some operations)
  )
  .pipe(
    switchMap((activities) => {
      // ... (some more operations)
    })
  );

public_timeline = toSignal(this.public_timeline$);

The public_timeline$ Observable fetches and processes data from an external source. I then create a signal public_timeline from this Observable using the toSignal() function.

Now, I want to be able to reset/reload/refresh/call toSignal() with newly updated data. I want to retrigger the entire process and replace the public_timeline signal with a new one based on the updated data.

I've looked into various methods like using Subject or BehaviourSubject to achieve this, but I'm unsure how to reset or refresh the signal properly. What's the best way to accomplish this in Angular, given the code structure I've provided? How can I update public_timeline with fresh data?

Any help or guidance on handling the scenario would be greatly appreciated. Thank you!

Answer 1

To do the toSignal update or refresh, you could use the BehaviorSubject.

This code

 
 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>

Answer 2

toSignal() is a bridge between the Observables and Signals worlds. If we're looking at the documentation:

Get the current value of an Observable as a reactive Signal. toSignal returns a Signal which provides synchronous reactive access to values produced by the given Observable, by subscribing to that Observable. The returned Signal will always have the most recent value emitted by the subscription, and will throw an error if the Observable errors.

This is happening because toSignal() eagerly subscribes to the observable under the hood. Basically, your signal will always have the latest value from your observable as long as the observable is emitting values. In your case if readProfileFeed is a http call, you need to do the call again. Otherwise, just make your observable to emit a new value and your signal will have the last value automatically.