typescript observable subscription undefined

Question

I make an http request to get some data which I am trying to display in the following:
I have a dropdown select to show entriesPerPage and a left and right cursor to switch page in my pagination. This works, but when I switch a page it always shows that

Cannot read property 'page' of undefined

In addition to that I can't show the totalEntries or totalPages at all, they don't seem to work in data binding either.

component.ts

  public getArticles(): void {
    this.articleService.getAllArticlesWithPagination(this.paginationResponse.pagination)
      .subscribe((data) => {
        this.dataSource.data = data.data;
        this.paginationResponse.pagination.page = data.pagination.page;
        this.paginationResponse.pagination.entriesPerPage = data.pagination.entriesPerPage;
        this.paginationResponse.pagination.totalEntries = data.pagination.totalEntries;
        this.paginationResponse.pagination.totalPages = data.pagination.totalPages;

      });
    console.log(this.paginationResponse); // added for this question after comments
  }

pagination.response

export class PaginationResponse<T> {

  public data: T[];
  public pagination: Pagination;

  constructor() {
    this.pagination = new Pagination();
  }
}

pagination.ts

export class Pagination {

  public static readonly DEFAULT_SIZE = 5;
  public static readonly FIRST_PAGE = 0;
  public static readonly DEFAULT_TOTAL = 3;
  public static readonly DEFAULT_ENTRIES = 10;

  public page: number;
  public entriesPerPage: number;
  public totalPages: number;
  public totalEntries: number;

  constructor() {
    this.page = Pagination.FIRST_PAGE;
    this.entriesPerPage = Pagination.DEFAULT_SIZE;
    this.totalEntries = Pagination.DEFAULT_ENTRIES;
    this.totalPages = Pagination.DEFAULT_TOTAL;
  }
}

console.log(this.paginationResponse)

EDIT: So it seems the paginationResponse.pagination is never actually filled with the data of data. Interesting is that data alone shows the fields of the pagination (totalPages, totalEntries, page, entriesPerPage) in addition to the data[] but data.pagination shows only those who are defined in the constructor of Pagination.ts (code snipped above). I don't see why it doesn't add the pagination to it.

SOLUTION: I expected the return in PaginationResponse to wrap my object of Pagination. I removed the pagination from it and instead put the 4 fields in it. So the answers despite being short seems about right.

Answer 1

From what I see data.pagination is undefined.