Make API call before page load ionic 4

import { Gastos, TodoService } from ‘./…/services/todo.service’;
import { ModalController, LoadingController } from ‘@ionic/angular’;
import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-listar’,
templateUrl: ‘./listar.page.html’,
styleUrls: [’./listar.page.scss’],
})
export class ListarPage implements OnInit {
todos: Gastos;
constructor(public modalController: ModalController,
private todoService: TodoService,
private loadingController: LoadingController) { }

ngOnInit() {
this.todoService.getTodos().subscribe(res => {
this.todos = res;
});
}

remove(item) {
this.todoService.removeTodo(item.id);
}

closeModal() {
this.modalController.dismiss();
}

}

Look at Angular’s Routeguards to solve this. See; https://angular.io/guide/router

https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864 only complementing
the answer, i think this article is perfect to you!