How to retrigger an observable when another is called?

I am trying to create refetch functionality. The problem is that because values$ and retryGetValues have different subscribers, my component is not re-rendering. How can I make it so that values$ is recalculated when I press my retry button?

export class ExampleComponent {
public values$ = this.getValues()

public retryGetValues() {
this.getValues().pipe(take(1)).subscribe()
}

private getLatestInput = computed(() => this.service.getInput())

private getValues() {
return defer(() => {
return this.service.getValues(this.getLatestInput())
}).pipe(() => {
// What can I do here to make the template re-evaluate values$?
})
}
}


<value-display [values]="values$ | async"></value-display>
<button (click)="retryGetValues()">retry</button>


I have tried to create an event emitter to notify the template observable, but this did not cause a rerender of the template:

private notify = new EventEmitter()

public values$ = combineLatest([this.getValues(), this.notify.asObservable()]).pipe(map([first]) => first)

public retryGetValues() {
this.getValues().pipe(take(1)).subscribe(() => {
this.notify.emit()
}))
}

Continue reading...