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.

Answer 1

You need to subscribe to activate the Observable,

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