Angular Async Pipe Re-Subscribe

Question

My understanding of the Angular async pipe is that is subscribes to an exposed Observable for you in the HTML template. E.G

Component

export class TestComponent {
    let todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.http.get<Array<Todos>>(...)
    }
}

Template

<div *ngFor="let todo of todos$ | async">
    {{ todo }}
</div>

My understanding is that the HttpClient Observable will emit the following events for success:

next(value)
completed

and on error

error(error)
completed

When an observable emits a completed event, the subscription is closed.

Therefore, if you are subscribed to a cold observable like Angulars HttpClient Observable, how do you retry that HttpClient request?

The async operator does the initial subscription but will be closed as soon as the cold observable completes, how do you get the async operator to resubscribe if you want to execute it again? for example if you wanted to do a refresh of the data.

Answer 1

just reassign the todos$ this will trigger the http request again

component

export class TestComponent {
    public todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
     this.getTodos();
    }

    getTodos(){
        this.todos$ = this.http.get<Array<Todos>>(...);
    }
}

template

<button (click)="getTodos()" >Refresh 🚀</button>

demo 🚀

Answer 2

You have a retry and retryWhen operators. Play with them :)

https://rxjs-dev.firebaseapp.com/api/operators/retry

https://rxjs-dev.firebaseapp.com/api/operators/retryWhen

@edit

To refresh the data on success you can do it like this:

export class TestComponent {
    refresh$ = new BehaviorSubject(true);
    todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.refresh$
            .pipe(
                 switchMap(() => this.http.get<Array<Todos>>(...))
            )
    }

    refreshData() {
        this.refresh$.next();
    }
}