Angular GET Request from Paginated API (Next Page)

Question

I need to retrieve data from a paginated rest api I'm using the following code but I can't load the information in the template Any suggestions on a better approach will be greatly appreciated!

component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  articles: any[];
  url = 'https://example.zendesk.com/api/v2/users.json';
  // finished = false;

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getArticles(this.url, this.articles);
  }

  getArticles(url: string, articles: any[]) {
    this.httpClient.get(url).toPromise().then(response => {
      console.log(response['next_page']);
      if (articles === undefined) { articles = response['articles']; } else { articles = articles.concat(response['articles']); }
      console.log(articles);
      if (response['next_page'] != null) {
        this.getArticles(response['next_page'], articles);
      } else { console.log('End'); return articles; }
    });
  }

}

html

<ul *ngIf="articles">
  <li *ngFor="let article of articles">
    {{ article.title }}
  </li>
</ul>

Answer 1

The Answer I am Posting is a good Example for the beginners Guys.

api.service.ts!!!

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Customer } from './customer';

@Injectable({
  providedIn: 'root'
})

export class ApiService {
 apiurl="https://reqres.in/api/users";

 constructor(private http:HttpClient) { }
 getConfig(){
   return this.http.get<Customer[]>(this.apiurl);
 }
}

The getConfig() in the above service is called in the below component. App.Component.ts!!!

    import { Component, OnInit } from '@angular/core';
    import { Customer } from './customer';
    import { ApiService } from './api.service';


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      customers:any;
      title = 'ApiTable';
      constructor(private apiservice:ApiService){}
      ngOnInit(){
        this.customers=[];
        return this.apiservice.getConfig().subscribe(data =>this.customers = data['data']);
      }

Html!!!

    <h3 style="color: green;text-align: center;">API CALLED DATA USING ANGULAR</h3>
    <div class="container">
    <table border="3  px" class="table table-striped table-hover">
      <thead class="thead-dark">
        <tr>
          <th>ID</th>
          <th>FIRST-NAME</th>
          <th>LAST-NAME</th>
          <th>EMAIL</th>
          <th>AVATAR</th>
        </tr>
        <tr>
          <td class="bg-primary"><input type="text" placeholder="ID" style="width:51px;"></td>
          <td class="table-secondary"><input type="text" placeholder="FIRST-NAME"style="width:155px;"></td>
          <td class="table-success"><input type="text" placeholder="LAST-NAME"style="width:155px;"></td>
          <td  class="table-warning"><input type="text" placeholder="EMAIL"style="width:155px;"></td>
          <td class="table-info"><input type="text" placeholder="AVATAR"style="width:155px;"></td>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of customers | slice:startIndex:endIndex">
          <td class="bg-primary">{{item.id}}</td>
          <td class="table-secondary">{{item.first_name}}</td>
         <td class="table-success">{{item.last_name}}</td>
          <td class="table-warning">{{item.email}}</td>
          <td class="table-info"><img src="{{item.avatar}}"></td>
        </tr>
      </tbody>
    </table>
    </div>
    <router-outlet></router-outlet>

Answer 2

I believe the problem is that I needed to subscribe the information, now it's working. Thank you anyway :)

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  articles: any[];
  url = 'https://example.zendesk.com/api/v2/users.json';

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getArticles(this.url, this.articles);
  }

  getArticles(url: string, articles: any[]) {
    this.httpClient.get(url).subscribe(data => {
      if (articles === undefined) { articles = data['articles']; } else { articles = articles.concat(data['articles']); }
      if (data['next_page'] != null) {
        this.getArticles(data['next_page'], articles);
      } else { console.log('Finished'); }
      this.articles = articles;
    });
  }

}

Answer 3

Without more information as Igor asked I think what you are doing wrong is that in the getArticles(url: string, articles: any[]) function you are setting the articles from your function parameters, not the property from your component. You should be using this.articles like this:

  getArticles(url: string, articles: any[]) {
    this.httpClient.get(url).toPromise().then(response => {
      console.log(response['next_page']);
      if (this.articles === undefined) { this.articles = response['articles']; } else { this.articles = this.articles.concat(response['articles']); }
      console.log(this.articles);
      if (response['next_page'] != null) {
        this.getArticles(response['next_page'], this.articles);
      } else { console.log('End'); return this.articles; }
    });
  }