How to use pagination when the data in one component and pagination controls in another component(ngx-pagination)

Suppose I have 2 component-parent.html and child.hmtl

parent.html-

<app-child [ProductList]="ProductList"></app-child>
 <div
                class="w-20 d-flex"
                *ngFor="
                  let product of ProductList
                    | paginate: { itemsPerPage: 9, currentPage: p }
                "
              >
                <div class="product-section">
                  <div class="row">
                    <div class="col-sm-12 d-flex">
                      <img
                        [src]="product.src"
                        height="150"
                        class="p-image"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
parent.ts-

 this.ProductList = res.Info.reverse();
 this.newItemEvent.emit(this.ProductList);

child.html-

<div class="mt-1 mb-1" >
        <pagination-controls
          previousLabel="Prev"
          nextLabel="Next"
          (pageChange)="p = $event"
        ></pagination-controls>
      </div>

child.ts-

@Input() ProductList!:[]
p:number=1;

I need to display listing in one component and pagiation controls in another component. How to solve this issue? Now I'm using ngx-pagination in angular