title: ngx pagination, How to have multiple paginations with NgFor? Issue with my code, (pagechange) is manipulating component data
body: <p>I have multiple paginations with <code>ng-for</code>. For multiple instances, I'm using the variable from <code>ng-for</code> to repeat paginations, but (pagechange) event is mutating data. when I change page in child pagination, it is changing data(first_name). I have a reproduced issue <a href="https://stackblitz.com/edit/ngx-pagination-vrrftd" rel="nofollow noreferrer">stackBlitz</a> </p>
  
  <p>I have also tried with index, but its disturbing main pagination.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;div *ngFor="let item of collection | paginate: {itemsPerPage:3, currentPage: page,id: mainPagination}; let i = index;"&gt;
          &lt;div class="user"&gt;
              {{ i + 1 }}. {{ item.first_name }} 
              &lt;!-- &lt;br&gt;Child Pagination --&gt;
              &lt;div class="childPagination" *ngFor="let address of item.address | paginate: {itemsPerPage:3, currentPage: item['first_name'],id: item['first_name']}" style="background-color:#18bc9c"&gt; 
                  {{ address.friend }}
              &lt;/div&gt;
              &lt;pagination-controls (pageChange)="item['first_name']= $event" [id]= "item['first_name']" class="my-pagination"&gt;&lt;/pagination-controls&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/ul&gt;
  &lt;pagination-controls (pageChange)="page = $event" [id]= "mainPagination" class="my-pagination"&gt;&lt;/pagination-controls&gt;
  </code></pre>