Angular paging and javascript sending events always returns the same page

Question

I’m studying javascript and angular now, I have a pagination component with the following HTML:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item">
      <a class="page-link" (click)="goPrevious()" tabindex="-1">Previous</a>
    </li>
    <li class="page-item">
      <a
        class="page-link"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
        (click)="goToPage($event.target.value)"
        >{{ currentPage }}</a
      >
    </li>
    <li class="page-item">
      <a class="page-link" (click)="goToPage($event.target.value)">{{
        currentPage + 1
      }}</a>
    </li>
    <li class="page-item">
      <a class="page-link" (click)="goToPage($event.target.value)">{{
        currentPage + 2
      }}</a>
    </li>
    <li class="page-item">
      <a class="page-link" routerLinkActive="active" (click)="goToPage($event.target.value)">{{
        currentPage + 3
      }}</a>
    </li>
    <li class="page-item">
      <a class="page-link" (click)="goToPage($event.target.value)">{{
        currentPage + 4
      }}</a>
    </li>

    <li class="page-item">
      <a class="page-link" (click)="goNext()">Next</a>
    </li>
  </ul>
</nav>

And I have a TS component with the following functions

@Output() paginate = new EventEmitter<number>();
currentPage = 0;


  constructor() { }

  ngOnInit() { this.currentPage = 1; }

  goNext() {this.currentPage += 5; }

  goPrevious = () =>  this.currentPage > 1 ? this.currentPage -= 5 : null;

  goToPage($event: any) {
    $event = this.currentPage;
    this.paginate.emit($event);
    console.log(this.currentPage);
  }

When I click on the numbers, for example 4, it always returns me Currentpage as 1. Where I am missing ?

Answer 1

'a' widgets no value

(click)="goToPage(currentPage + 1)" 

ts:

 goToPage($event: any) {
    this.currentPage=$event;
    this.paginate.emit($event);
    console.log(this.currentPage);
  }

Answer 2

The problem is that I was always passing the currentPage instead of the event value. I corrected it by leaving it as follows. Then correct the method as follows:

goToPage($event: any) {
    this.paginate.emit($event.target.innerText);
  }