const subscription = interval(1000).subscribe(() => {
          this.http
            .get(
              `https://api.github.com/users/${user}/repos?page=${i}&per_page=100`
            )
            .subscribe((data: RepositoryI[]) => {
              subscriber.next(data);
              if(!data) { // check for null data
                subscription.unsubscribe();  // cancel the interval subscription
                return;  // stop the subscription
              }
            });
          })
        }

This approach ensures that you handle the subscription properly by unsubscribing when there is no data.

Please confirm if this solution meets your requirements.

One interesting feature of Javascript is its ability to run things asynchronously.

For example, if you use a 'For loop' to make API calls in parallel, the count will increment simultaneously.

When making multiple parallel API calls, each call may return at different times.

However, there is a possibility that before all API calls complete, the value of 'i' reaches 3.

In such cases, the third API call with fewer records might reach the subscribe logic first, resulting in only 46 records being displayed.

subscriber.next(data); // 3rd api comes here 
              
if(pages == i) subscriber.complete();  // now your pages and i values are same and it gets completed.
            });

SOLUTION

import {defer } from 'rxjs';

defer(async () => {
     for (let i = 1; i <= pages; i++) {
          await this.http
            .get(
              `https://api.github.com/users/${user}/repos?page=${i}&per_page=100`
            )
            .toPromise().then((data: RepositoryI[]) => {
              subscriber.next(data);
            });
        }
}.subscribe(x => { subscriber.complete(); });

Outline

In this explanation, I will outline two different methods to accomplish the task at hand. The first approach involves an imperative way (utilizing a loop), while the second method is reactive in nature (using rxjs).

Imperative Approach

To achieve this imperatively, you can implement a simple loop to retrieve all the pages from the API endpoint. This function returns a promise, but it can be converted into an observable if required by using from:

public getUserRepos(user: string): Promise<Repository[]> {
  let pageNumber = 0;
  let results = [];

  const getPage = pageNumber =>
    this.http
      .get<Repository[]>(`https://api.github.com/users/${user}/repos?page=${pageNumber}&per_page=100`)
      .toPromise();

  do {
    const pageResults = await getPage(pageNumber++);
    results = results.concat(pageResults);
  } while(pageResults.length !== 0);

  return results;
}

Reactive Approach

For a more reactive solution, you can utilize the expand operator provided by rxjs to fetch each page sequentially:

When implementing this method, ensure that the http response is mapped to an object containing the corresponding page number. This enables the expand operator to determine the subsequent page to request.

Here's an example in your context:

public getUserRepos(user: string): Observable<Repository[]> {
  const getPage = pageNumber =>
    this.http
      .get<Repository[]>(`https://api.github.com/users/${user}/repos?page=${pageNumber}&per_page=100`)
      .pipe(map(z => ({ results: z, page: pageNumber }))); // Include page number in results

  return getPage(0).pipe(
    expand(pr => getPage(pr.page + 1)),
    takeWhile(pr => pr.results.length !== 0),
    map(pr => pr.results),
    scan((acc, v) => [...acc, ...v])
  );
}

This implementation initiates a query for page 0, followed by consecutive requests for subsequent pages until a page returns no entries, resulting in the completion of the observable stream.

The use of scan allows for displaying partial results as pages are fetched, providing real-time feedback rather than waiting for all pages to load before showing any data.

Refer to this StackBlitz for a demonstration.

Note: There may be an additional query for a final page which will be cancelled. If you prefer to avoid this, adjust the expand call like so:

expand(pr => (pr.results.length !== 0 ? getPage(pr.page + 1) : EMPTY))

Here is a more concise approach to providing an answer. If the nested structure bothers you, consider defining an inner observable as a separate function.

public getUserRepos = (user:string) =>
  this.getUserData(user)
  .pipe(
    map(({public_repos})=>Math.ceil(public_repos / 100)),
    switchMap(max=>interval(1)
    .pipe(
      takeWhile(i=>++i<=max)
      mergeMap(i=>this.http.get<RepositoryI[]>(`https://api.github.com/users/${user}/repos?page=${++i}&per_page=100`))
    )),
    scan((acc, repo)=>[...acc, ...repo], [] as RepositoryI[])
  );

This was my strategy:

1. Retrieve the page limit using object destructuring from getUserData().
2. Utilize interval() to initiate a counting observable (starting with 0 and utilizing

   ++</code later on).</li>
   <li>Employ <code>takeWhile()

   to verify if the count surpasses the page limit; otherwise, the observable completes at this point.
3. Use mergeMap() to line up a sequence of API calls for each number emitted by interval().
4. Aggregate all responses into a singular array response with scan().

Update: When testing this method, your component logic will require an update.

Since scan() consolidates all API requests into a single observable, you can assign these values to your state array instead of appending them. The observable will emit right after the initial API request. With every subsequent API request completion, a new array containing the added items will be emitted. This ensures that your component can display data without having to wait for all API requests to finish.