app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.page.ts

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

export interface Tarea {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  tareas: Tarea[];

  constructor(private http: HttpClient) { 
  }

  onClickDescargarDatos() {
      this.http.get('https://jsonplaceholder.typicode.com/todos')
        .subscribe(
          (response: any[]) => {
            this.tareas = response;
          }, error => {
            console.log('Error: ', error.message);
          }
        )
  }

}

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Listar datos JSON
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-button (click)="onClickDescargarDatos()">
      Descargar datos
    </ion-button>
    <ion-list>
      <ion-item *ngFor="let tarea of tareas"> 
        <p>{{ tarea.title }}</p>
      </ion-item>
    </ion-list>
  </div>
</ion-content>