Rest-api call is not sent in Angular 6 and RxJS

Question

I have this method in the component:

saveItem() {
   return this.itemService.updateItem(this.item)
     .pipe(
       tap((data: any) => {
         this.toastr.success('Saved');
       }),
       catchError((error: any) => {
       return throwError(error.error);
      }
    )
  )
}

And this is the function inside the itemService:

updateItem(item: Item) {
    return this.http.post<any>(this.updateItemUrl, {
        item: item
    });
}

If I put a breakpoint inside the saveItem() on the line 'return this.itemService.updateItem(this.item)', and if I put a breakpoint inside the updateItem() on the line 'return this.http...', it correctly goes and stop into the breakpoints... But I have the following issue: the rest-api calling is not triggered, and the http call is not sent.. in fact, if a I put a breakpoint inside the .pipe() operator, it doesn't go inside. Why?

Answer 1

Observables (like http-Requests) get only active when they have at least one subscriber.

=> No Subscriber => No Http-Request

You can subscribe explicitly by

myObservable.subscribe()

or implicitly by the async pipe in the html template

<span> {{ myObservable | async }} </span>

warm regards