I have a page that contains tabs. When I click on a specific tab the component related to it is created. It goes in the ngOnInit and when I leave the tab onDestroy is called.

In my ngOnInit function I have an ther function that is called for initializing some fields. At first, the actual request is the good one but when I leave and goes to the same tab my variable pageModelResponse is not returning the good result but the old one. The actual request received in my browser is different from the one I have in my variable. Since I am in a project that is shared among teams I wonder if it is really needed to update to RxJS 7 in order to use lastValueFrom.

ComponentBase.ts:

public async initializeDefaults(): Promise<void> {
            const pageModelResponse = await this.alertService.getPageModel(this.masterFeatureId).toPromise();
            this.pageModel = pageModelResponse?.data as AlertProfilePageModel;
            this.selectedSortOption = this.pageModel?.sortOptions?.find((x: SortOption) => x.isSelected) ?? {} as SortOption;
            this.getCurrentUrlParams();
}

Component.ts:

public async ngOnInit(): Promise<void> {
    await this.initializeDefaults();
}