BACKGROUND: I'm currently working on a mobile app that uses Promises and I'm exploring RxJS' Observables to replace all existing promise API calls.
My understanding for async pipe is that it automatically unsubscribes when the ngOnDestroy
is triggered. Since I am using Ionic Routing it does not trigger the ngOnDestroy
it can only trigger ionViewWillLeave
once I navigated to other page.
CODE: I implemented an async pipe in my html template that looks like this:
<ng-container *ngIf="accounts$ | async as accounts; else loadingData">
<app-account-card *ngFor="let account of accounts" [account]="account"></app-account-card>
</ng-container>
<!-- SKELETON -->
<ng-template #loadingData>
<app-skeleton-account-card></app-skeleton-account-card>
</ng-template>
I have an account.service.ts
that returns an Observable<Account[]>
:
getAccountsObserver(): Observable<Account[]> {
try {
return from(this.getSessionID()).pipe(
switchMap(sessionId => this.http.get<Account[]>(`${URLS.accounts}${ENDPOINTS.accBalance}${sessionId}`))
);
} catch (e) {
return null;
}
}
For my account.component
I simply declared a variable accounts$
:
accounts$: Observable<Account[]>;
constructor(
private accountProvider: AccountProvider
) {}
ngOnInit() {
this.accounts$ = this.accountProvider.getAccountsObserver();
}
QUESTION: Does the Async Pipe still unsubscribes? If no, how can I unsubscribe to it? Is Async Pipe still a best way to display a data from the API or do I need to find a different approach in my case?