why observable pipe is not working in component?

Question

I have an observable which is maked with firebase/fireStore. if I subscribe this observable in component it works . but If I pipe this observable it doesn't work even though i expect . and I am not getting any error. my question; why it doesn't work?

my codes;

service;

getLastSeans(uid) {
    return this.afs.doc<any>(`users/${uid}/lastseans/seansLive`).valueChanges();
  }

component;

with pipe it doesn't work

this.roomService.getLastSeans(this.userId).pipe(map(x=>{console.log(x);return x;}));

if I subscribe it work like this;

this.roomService.getLastSeans(this.userId).subscribe(x=>console.log(x));

I want to learn why this happen?

Observable start running pipe methods only when you subscribe its. — Beniamin, Apr 06 '20 at 10:18
Does this answer your question? [Angular2 http.get() ,map(), subscribe() and observable pattern - basic understanding](https://stackoverflow.com/questions/34671715/angular2-http-get-map-subscribe-and-observable-pattern-basic-understan) — Edric, Apr 06 '20 at 10:42

score 10 · Accepted Answer · answered Apr 06 '20 at 10:26

Adding a pipe does not force the observable to be evaluated, it creates the new observable instance with extra logic defined in pipes, according to docs:

A Pipeable Operator is a function that takes an Observable as its input and returns another Observable

To evaluate the new observable, you have to subscribe to it, e.g. using the .subscribe call:

this.roomService.getLastSeans(this.userId)
    .pipe(map(x=>{
        console.log(x);
        return x;
    })).subscribe();

Please note, that empty .subscribe is acceptable here, as the logic is defined in the pipes.

Or, altering the template to use the AsyncPipe, e.g:

<app-live-sean *ngFor="let item of liveSeans | async"></app-live-sean>

Assuming that liveSeans is the field of the component, which sets as

this.liveSeans = this.roomService.getLastSeans(this.userId)
    .pipe(map(x=>{
        console.log(x);
        return x;
    }));

In this case AsyncPipe will subscribe to it, receive the results and unsubscribe from the observable, keeping the memory safe without leaks.

thanks for answer. the basic point is here"Adding a pipe does not force the observable to be evaluated, it creates the new observable instance with extra logic defined in pipes, according to" — necati, Apr 06 '20 at 10:36

why observable pipe is not working in component?

1 Answers1