CODEWITHSUNDEEP
angularpagination
FakeEmpire
FakeEmpire

Reputation: 798

Using ngx-pagination on multiple uses of same component

I am using the ngx-pagination library which works great for my reusable data table component when I use it once, however multiple uses of this component causes the pagination to only work on one component. How can I make this pagination reusable if it is possible?

table.component.html 

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                <label>{{col.header}}</label>
            </th>
        </tr>
    </thead>
    <tbody>    
        <tr *ngFor="let row of data | paginate: { itemsPerPage: 6, 
           currentPage: p }">`
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

<pagination-controls 
class="my-pagination" 
(pageChange)="p = $event">
</pagination-controls>

table.component.ts

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})

export class DataTableComponent {

  @Input() data
  @Input() cols
  p: number = 1

}

Upvotes: 0

Views: 1145

Answers (1)

Aylon Spigel
Aylon Spigel

Reputation: 39

you can add the id property. this will allow you to have multiple pagination on the same page and might solve your issue too.

Upvotes: 1

Related Questions