Custom Angular pipe takes string and returns Observable

So, I'm writing a custom Pipe. It takes a String as an argument, combines it with an Observable obtained from ComplexObservablService, and returns an Observable<String>. (Yes, I'm simplifying a bit.)

import { Pipe, PipeTransform } from '@angular/core';
import { ComplexObservableService } from 'myFiles';

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {

  constructor(private $complexObservableService: ComplexObservableService) { }

  transform(input: string): Observable<string> {
    return this.$complexObservableService.getStringObservable().pipe(map(str => {
      console.log('here');
      return str + input;
    }));
  }
}

Then, in my component I have (essentially) the following code.

<span></span>
<button (click)="pushNewValueToComplexObservableService()">click me</button>

Now, ComplexObservableService publishes one initial value when it's instantiated. Therefore, when the page initially loads, one value is immediately returned, and rendered correctly by the async pipe.

The problem is, when the button is pushed, and ComplexObservableService publishes a second value, the HTML is not rerendered. Because the value of stringFromComponent has not been updated, but only the value published by ComplexObservableService, somehow Angular gets confused and the change detection things don't execute; the console.log statement is never reached.

Is there any way to do what I'm trying to do?

Thanks!

from Recent Questions - Stack Overflow https://ift.tt/3sglVIe
https://ift.tt/eA8V8J