How to fix pagination problems?

Question

I'm write project for learning Angular. My project displays posts from https://jsonplaceholder.typicode.com/. I am writing my own pagination component and at the current stage, I have problems with pagination. Why pagination doesn't work? Why does not the page change when clicking on any number in the pagination? Where is my mistake? How to fix this for pagination to work?

All project here: posts project

pagination.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-pagination",
  templateUrl: "./pagination.component.html",
  styleUrls: ["./pagination.component.css"]
})
export class PaginationComponent implements OnInit {
  @Input() itemsPerPage: number = 0;
  @Input() totalItems: number = 0;
  @Input() page: any = 1;

  @Output() pageChanged = new EventEmitter();

  ngOnInit() {}

  pagesCount(): number {
    return Math.ceil(this.totalItems / this.itemsPerPage);
  }

  setPage(page: any) {
    this.pageChanged.emit(page);
  }

  prevPage() {
    this.setPage(this.page - 1);
  }

  nextPage() {
    this.setPage(this.page + 1);
  }

  getPages(): any {
    const pages = [];
    const currentPage = this.page;
    const count = this.pagesCount();

    for (let page = currentPage; page <= count; page++) {
      pages.push(page);
    }

    return pages;
  }

  onChangePage(event: any) {
    this.setPage(event);
    console.log("onChangePage", event);
  }
}

pagination.component.html

<nav class="pagination">
  <button class="pagination-prev" (click)="prevPage()" [disabled]="page === 1">
    &laquo;
  </button>
  <ul class="pagination-list">
    <li *ngFor="let page of getPages()" (click)="setPage(page)">{{ page }}</li>
  </ul>
  <button class="pagination-next" (click)="nextPage()">&raquo;</button>
</nav>

app.component.ts

import { Component, OnInit } from "@angular/core";
import { Post, PostService } from "./post.service";
import { User, UserService } from "./user.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  page: any = 1;

  posts: Post[] = [];
  users: User[] = [];

  public totalItems: number = 100;
  public itemsPerPage: number = 10;

  error = "";

  constructor(
    private postService: PostService,
    private userService: UserService
  ) {}

  ngOnInit() {
    this.fetchPosts();
    this.fetchUsers();
  }

  onChangePage(event: any) {
    this.page = event;
    this.fetchPosts();

    console.log("onChangePage");
  }

  fetchPosts() {
    this.postService.fetchPosts(this.page, this.itemsPerPage).subscribe(
      (posts) => {
        this.posts = posts;
        // this.totalItems
      },
      (error) => {
        this.error = error.message;
      }
    );
  }

  fetchUsers() {
    this.userService.fetchUsers().subscribe((users) => {
      this.users = users;
    });
  }
}

app.component.html

<table>
  <thead>
    <tr>
      <th>user id</th>
      <th>Имя пользователя</th>
      <th>Заголовок</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of posts">
      <td>{{ item.userId }}</td>
      <td>
        <div *ngFor="let user of users">
          {{ item.userId === user.id ? user.username : '' }}
        </div>
      </td>
      <td>{{ item.title | titlecase }}</td>
    </tr>
  </tbody>
</table>

<app-pagination
  (changePage)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
></app-pagination>

Answer 1

Your event emitter is pageChanged and not changePage. Change the below

<app-pagination
  (changePage)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
></app-pagination>

to

<app-pagination
  (pageChanged)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
></app-pagination>

Forked sandbox:-

Answer 2

Change changePage to pageChanged. Because your output directive is called pageChanged.

<app-pagination
  (pageChanged)="onChangePage($event)"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"></app-pagination>