Angular 6 - rxjs pipe not working on valueChanges

Question

I have a reactive form, with a text input. For ease of access in my typescript, I declared:

get parentId(): FormControl {
    return this.addForm.get("parentId") as FormControl;
}

This part works, the control is properly accessed.

Now in my ngOnInit if I do this:

this.parentId.valueChanges.subscribe(() => console.log("Changed"));

The console log is executed at every character changed in the input, as expected. But if I do this:

this.parentId.valueChanges.pipe(tap(() => console.log("Changed")));

Nothing happens. No errors, no anything. I tried also using map, switchMap, etc.nothing works. It seems that the pipe does not work on valueChanges. I am using the pipe method elsewhere in my code on different observables without any problem.

And I need to use pipe here in order to debounce, map, etc.

Any idea what I'm doing wrong?

-- Edit --

This is the code example from Angular Material site, on Autocomplete component:

ngOnInit() {
   this.filteredOptions = this.myControl.valueChanges
       .pipe(
          startWith(''),
          map(val => this.filter(val))
       );
}

There is no subscribe at the end and the example works.

Observables won't emit anything until you subscribe to them. So if you want to see output from tap you need to call subscribe() after pipe(). — martin
You need a subscribe() at the end of the chain to activate the observable. — Richard Matsen
In the example on Angular Material site on autocomplete component there is no such thing: — Matteo Mosca
You're both right. There is no subscribe in the example because the pipe is bound to a variable which is "subscribed to" with the async pipe. My fault for not understanding that. Thanks. — Matteo Mosca
@martin Just came here looking for the same problem, thanks very much! — Kaedeko

Sajeetharan Sajeetharan · Accepted Answer · 2018-06-02T17:22:18

You need to subscribe to activate the Observable,

ngOnInit() {
   this.filteredOptions = this.myControl.valueChanges
       .pipe(
          startWith(''),
          map(val => this.filter(val))
       ).subscribe();
}

Angular 6 - rxjs pipe not working on valueChanges

1 Answers