title: How to use pagination when the data in one component and pagination controls in another component(ngx-pagination)
body: <p>Suppose I have 2 component-parent.html and child.hmtl</p>
  <pre><code>parent.html-
  
  &lt;app-child [ProductList]=&quot;ProductList&quot;&gt;&lt;/app-child&gt;
   &lt;div
                  class=&quot;w-20 d-flex&quot;
                  *ngFor=&quot;
                    let product of ProductList
                      | paginate: { itemsPerPage: 9, currentPage: p }
                  &quot;
                &gt;
                  &lt;div class=&quot;product-section&quot;&gt;
                    &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-sm-12 d-flex&quot;&gt;
                        &lt;img
                          [src]=&quot;product.src&quot;
                          height=&quot;150&quot;
                          class=&quot;p-image&quot;
                          alt=&quot;&quot;
                        /&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  parent.ts-
  
   this.ProductList = res.Info.reverse();
   this.newItemEvent.emit(this.ProductList);
  
  child.html-
  
  &lt;div class=&quot;mt-1 mb-1&quot; &gt;
          &lt;pagination-controls
            previousLabel=&quot;Prev&quot;
            nextLabel=&quot;Next&quot;
            (pageChange)=&quot;p = $event&quot;
          &gt;&lt;/pagination-controls&gt;
        &lt;/div&gt;
  
  child.ts-
  
  @Input() ProductList!:[]
  p:number=1;
  </code></pre>
  <p>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</p>