Async pipe not working when using an observable created from a ControlValueAccessor control's valueChanges

Question

I have a ControlValueAccesor with one FormControl. I need to create a new observable from the control's valueChanges and use it in the template via AsyncPipe. So in CVA's writeValue I update the form control's value using setValue().

 public isOdd$ = new Observable<boolean>();
 nestedFc = new FormControl([null]);

 writeValue() {
   this.nestedFc.setValue(22);
 }
 ngOnInit() {
    this.isOdd$ = this.nestedFc.valueChanges.pipe(
      map((value) => value % 2 !== 0)
    );
 }

<span> <input [formControl]="nestedFc"/> </span>
<span *ngIf="{value: isOdd$ | async} as context"> {{context.value}}</span>

The problem is that valueChanges is triggered when writeValue is first called but the async pipe does not "see" these changes, and so the view does not show the update.

There is a couple GitHub issues around this: ng 11: patchValue, valueChanges & async pipe and https://github.com/angular/angular/issues/40826.

Based on the last one I have created a stackblitz to reproduce the problem. If writeValue uses setTimeout to patch the form control's value, valueChanges is triggered and the async pipe "sees" the change.

Is this correct? Is there really no other way but to use setTimeout?

Answer 1

The problem is that the writeValue it's executed before the ngOnInit. Generally you use startWith rxjs operator in the way

this.isOdd$ = this.nestedFc.valueChanges.pipe(
  startWith(this.nestedFc.value), //<--start with
  tap((changes) =>
    console.log(
      `valueChanges triggered on pipe, changes: ${JSON.stringify(changes)}`
    )
  ),
  map((value) => value % 2 !== 0)
);