Angular App deosn't dispay data from table althgouh the exist in the console

Question

One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.

here is the class for the "Dossier entity":

export class Dossier {
  id?: any;
  title?:string;
  creationDate?:string;
  statusDossier?:string;
  documentNumber?:number;
  activityTitle?:string;
  published?:boolean;

}

This is a kind of server-side paging, where the server sends just a single page at a time. ngx-pagination supports this scenario, so We actually only need to use tutorials and totalItems when working with this library.

This service will use Angular HttpClient to send HTTP requests.

services/dossier.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {Dossier} from "../models/dossier.model";

const baseUrl = 'http://localhost:8080/api/dossiers';

@Injectable({
  providedIn: 'root'
})
export class DossierService {

  constructor(private http: HttpClient) { }

  getAll(params: any): Observable<any> {
    return this.http.get<any>(baseUrl, { params });
  }

  get(id: any): Observable<Dossier> {
    return this.http.get(`${baseUrl}/${id}`);
  }

  create(data: any): Observable<any> {
    return this.http.post(baseUrl, data);
  }

  update(id: any, data: any): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }

  findByTitle(title: any): Observable<Dossier[]> {
    return this.http.get<Dossier[]>(`${baseUrl}?title=${title}`);
  }
}

We can customize the label displayed on the “previous”/”next” link using previousLabel/nextLabel, and enable “responsive” to hide individual page links on small screens.

For pagination, we’re gonna use DossierService.getAll() methods.

components/dossiers-list/dossiers-list.component.ts

export class DossiersListComponent implements OnInit {

  dossiers: Dossier[] = [];
  currentDossier: Dossier = {};
  currentIndex = -1;
  title = '';

  page = 1;
  count = 0;
  pageSize = 3;
  pageSizes = [3, 6, 9];

  constructor(private dossierService: DossierService) { }

  ngOnInit(): void {
    this.retrieveDossiers();
  }

  getRequestParams(searchTitle: string, page: number, pageSize: number): any {
    let params: any = {};

    if (searchTitle) {
      params[`title`] = searchTitle;
    }

    if (page) {
      params[`page`] = page - 1;
    }

    if (pageSize) {
      params[`size`] = pageSize;
    }

    return params;
  }

  retrieveDossiers(): void {
    const params = this.getRequestParams(this.title, this.page, this.pageSize);

    this.dossierService.getAll(params)
      .subscribe({
        next: (data) => {
          const { dossiers, totalItems } = data;
          this.dossiers = dossiers;
          this.count = totalItems;
          console.log(data);
        },
        error: (err) => {
          console.log(err);
        }
      });
  }

  handlePageChange(event: number): void {
    this.page = event;
    this.retrieveDossiers();
  }

  handlePageSizeChange(event: any): void {
    this.pageSize = event.target.value;
    this.page = 1;
    this.retrieveDossiers();
  }

  refreshList(): void {
    this.retrieveDossiers();
    this.currentDossier = {};
    this.currentIndex = -1;
  }

  setActiveTutorial(dossier: Dossier, index: number): void {
    this.currentDossier = dossier;
    this.currentIndex = index;
  }

  removeAllDossiers(): void {
    this.dossierService.deleteAll()
      .subscribe({
        next: res => {
          console.log(res);
          this.refreshList();
        },
        error: err => {
          console.log(err);
        }
      });

  }

  searchTitle(): void {
    this.page = 1;
    this.retrieveDossiers();
  }

}
and finally here is the html file:

<div class="list row">
  <div class="col-md-8">
    <div class="input-group mb-3">
      <input
        type="text"
        class="form-control"
        placeholder="Search by title"
        [(ngModel)]="title"
      />
      <div class="input-group-append">
        <button
          class="btn btn-outline-secondary"
          type="button"
          (click)="searchTitle()"
        >
          Search
        </button>
      </div>
    </div>
  </div>

  <div class="col-md-12">
    <pagination-controls
      previousLabel="Prev"
      nextLabel="Next"
      [responsive]="true"
      (pageChange)="handlePageChange($event)"
    ></pagination-controls>
  </div>

  <div class="col-md-6">
    <h4>Tutorials List</h4>
    <ul class="list-group">
      <li
        class="list-group-item"
        *ngFor="
          let tutorial of dossiers | paginate : {
                  itemsPerPage: pageSize,
                  currentPage: page,
                  totalItems: count
                };
          let i = index
        "
        [class.active]="i == currentIndex"
        (click)="setActiveTutorial(tutorial, i)"
      >
        {{ tutorial.title }}
      </li>
    </ul>
  </div>

  <div class="col-md-6">
<!--    <app-tutorial-details-->
<!--      [viewMode]="true"-->
<!--      [cu]="currentDossier"-->
<!--    ></app-tutorial-details>-->
  </div>

  <div class="mt-3">
    <button class="m-3 btn btn-sm btn-danger" (click)="removeAllDossiers()">
      Remove All
    </button>

    Items per Page:
    <select (change)="handlePageSizeChange($event)">
      <option *ngFor="let size of pageSizes" [ngValue]="size">
        {{ size }}
      </option>
    </select>
  </div>
</div>