[Ionic 4] Reuse same previously fetched data

Hello, I tried to find in the forum and reading the documentation (on the lifecycle hooks part) but couldn’t find the proper answer.

I have in my page a ion-segment with two options which each one has a its own API call to fetch the data and render the response on each specific segment, like this:

        <ion-segment [(ngModel)]="selectedSegment">
            <ion-segment-button value="last">Last</ion-segment-button>
            <ion-segment-button value="next">Next</ion-segment-button>
        </ion-segment>

        <ion-list [ngSwitch]="selectedSegment">
            <ng-container *ngSwitchCase="'last'">
                <page-A></page-A>
            </ng-container>
            <ng-container *ngSwitchCase="'next'">
                <page-B></page-B>
            </ng-container>
        </ion-list>

I need to cache (or whatever the correct definition) the values when I move out and return to the same segment/page because the API gets called everytime when I navigate back to the page with already fetched (and unchanged) data.

Thanks and sorry in advance if this is a very basic concept that I didn’t grasp it in Ionic.

I think this is a cousin of the issue discussed here.

Hi rapropos, really appreciate your response and I have learned something new from your post.
But, unfortunately, I still need to find a way to make it work with my implementation.