UI is not updating the index in Angular child component when trying to change it from the parent component. What am I missing?

I’m trying to update the page index from the parent component in an Angular application using a child component that handles pagination. The child component has an index input property and an event emitter for page changes. However, when I try to update the index from the parent, the UI does not reflect the updated value, and the pagination does not change.My project is on Angular 13.

    import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'numbered-pagination',
  templateUrl: './numbered-pagination.component.html',
  styleUrls: ['./numbered-pagination.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NumberedPaginationComponent implements OnChanges {
  @Input() index: number = 1;
  @Input() totalCount: number = 0;
  @Input() pageSize: number = 50;
  @Input() rulerLength: number = 5;

  @Output() page: EventEmitter<number> = new EventEmitter<number>();

  maxPages: number = 1;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['totalCount'] || changes['pageSize']) {
      this.calculateMaxPages();
    }
  }

  private calculateMaxPages(): void {
    this.maxPages = Math.ceil(this.totalCount / this.pageSize) || 1;
  }

  get pagination(): NumberedPagination {
    const { index, maxPages, rulerLength } = this;
    const pages = ruler(index, maxPages, rulerLength);
    return { index, maxPages, pages };
  }

  navigateToPage(pageNumber: number): void {
    if (allowNavigation(pageNumber, this.index, this.maxPages)) {
      this.index = pageNumber;
      this.page.emit(this.index);
      console.log("Index  =>> " + this.index);
    }
    console.log("Index1  =>> " + this.index);
  }

  trackByFn(index: number): number {
    return index;
  }

  constructor(private cdr: ChangeDetectorRef) {}

  refreshToInitial() {
    this.navigateToPage(1);
    this.cdr.detectChanges();
    this.cdr.markForCheck();
  }
}

Parent Component TypeScript

<button class="edit_button" (click)="onAssignToButtonClick('Extracted')">
  Assign To
</button>

<numbered-pagination [index]="extractedPageNumber" (page)="pageEvent('New', $event)" [pageSize]="pageSize" [totalCount]="pageNumberExtractedLimit"></numbered-pagination>

Problem:

1. I’m trying to update the page index from the parent component using
   the refreshPaginationToInitial method, but the child component’s
   pagination UI doesn’t reflect the updated index.
2. The child component uses ChangeDetectionStrategy.OnPush and is not
   updating the UI when the index value changes in the parent.

What I’ve tried:

1. I’m using ChangeDetectorRef in the child component to manually
   trigger change detection, but it doesn’t seem to update the UI.

2. The child’s pagination logic correctly emits page changes via the
   page output, but the UI doesn’t react to the changes.

Can someone explain why this isn’t working or suggest a solution?