How to reinitialize current page with angular pagination?

Question

I implemented pagination in angular application from this site: pagination

I have two components for search functionality. First is parent. It contains search parameters and button that calls method onSearch(). Second is child component with search results showed in list with pagination. This is how paging works in child component:

<tr *ngFor="let item of searchResults | paginate: { itemsPerPage: numberOfItemsPerPage, currentPage: p, id: 'searchResults' };
             index as i; let even=even; let odd=odd">
<td class="gridItemLeft">
                    <span class="label leftAlign">{{ i + 1 + (p-1)*numberOfItemsPerPage }}</span>
                </td>
                <td class="gridItemLeft">
                    <span class="label leftAlign">{{ item.id }}</span>
                </td>
                <td class="gridItemLeft">
                    <a [routerLink]="[getRouterLinkPage(item.requestType), item.id]">{{ item.typeName }}</a>
                </td>
                <td class="gridItemLeft">
                    <span class="label leftAlign">{{ item.date | date:'medium' }}</span>
                </td>
                <td class="gridItemLeft">
                    <span class="label leftAlign">{{ item.applicationUserUsername }}</span>
                </td>
            </tr>
...
<app-pagination-control (pageChange)="p = $event" autoHide="true" id="searchResults"></app-pagination-control>

I created this class:

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { DEFAULT_TEMPLATE, DEFAULT_STYLES } from './template';
import { TranslateService } from '@ngx-translate/core';

function coerceToBoolean(input: string | boolean): boolean {
    return !!input && input !== 'false';
}

/**
 * The default pagination controls component. Actually just a default implementation of a custom template.
 */
@Component({
    selector: 'app-pagination-control',
    template: DEFAULT_TEMPLATE,
    styles: [DEFAULT_STYLES],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None
})
export class PaginationControlComponent {

    @Input() id: string;
    @Input() maxSize = 7;
    @Input()
    get directionLinks(): boolean {
        return this._directionLinks;
    }
    set directionLinks(value: boolean) {
        this._directionLinks = coerceToBoolean(value);
    }
    @Input()
    get autoHide(): boolean {
        return this._autoHide;
    }
    set autoHide(value: boolean) {
        this._autoHide = coerceToBoolean(value);
    }
    @Input()
    get responsive(): boolean {
        return this._responsive;
    }
    set responsive(value: boolean) {
        this._responsive = coerceToBoolean(value);
    }
    @Input() previousLabel = this.translateService.instant('Pagination.Previous');
    @Input() nextLabel = this.translateService.instant('Pagination.Next');
    @Input() screenReaderPaginationLabel = this.translateService.instant('Pagination.Pagination');
    @Input() screenReaderPageLabel = this.translateService.instant('Pagination.Page');
    @Input() screenReaderCurrentLabel = this.translateService.instant('Pagination.Current');
    @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();

    constructor(
        private translateService: TranslateService
    ) {

    }

    private _directionLinks = true;
    private _autoHide = false;
    private _responsive = false;
}

p is set to 1 in child component. There is a bug when I navigate to i.e. third page. Then press search button again. I should be on first page if new search returned more than one page in result set, but it stays on third page. p did not reinitialize. My question is how should I pass data to set currentPage to 1 when search event happen?

I tried to set p as Input element, set it in onSearch method to 1, and send it to child like this:

<child-component [p]='p'></child-component>

Answer 1

I resolved my problem by passing whole paginate object as input and setting currentPage property to 1 on search.