How to use multiple Http Requests in Angular 4

You have to use forkJoin method in order to load data from more than one source.

First of all, include them in the typescript file.

import {Observable} from 'rxjs/Rx';

UPDATE

For new versions of Angular use this:

import { forkJoin } from 'rxjs';

Many times, we need to load data from more than one source, and we need to wait until all the data has loaded.

forkJoin method wraps multiple Observables. In the other words, we use forkJoin to run concurrent http requests.

subscribe() method of forkJoin sets the handlers on the entire set of Observables.

You can read more about forkJoin here, including a lot of examples.

Suppose you have to get first 10 pages.

var pages:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Or simply: var pages:number[] = new Array(10).fill().map((v, i) => i + 1);

// map them into a array of observables and forkJoin
return Observable.forkJoin(
   pages.map(
      i => this.http.get('http://swapi.co/api/people/?page=' + i)
        .map(res => res.json())
   )
).subscribe(people => this.people = people);