UI is not updating the index in Angular child component when trying to change it from the...

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?

Continue reading...