Open Closed

Multiple ngx-datables #328


User avatar
0
ninomartini created
  • ABP Framework version: v3.04
  • UI type: Angular

I can't figure out how to use two or more ngx-datatables on the same page using the ListService.

Table 1: ngx-datatable [rows]="data.items" [count]="data.totalCount" [list]="list" default>

Table 2: <ngx-datatable [rows]="dataMessages.items" [count]="dataMessages.totalCount" [list]="list" default>

Going to page 2 on one table causes the other table to also go to page two. How do I break this synchronization?

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

1 Answer(s)
  • User Avatar
    2
    ninomartini created

    Solved by creating a factory function.

      providers: [
        { provide: 'list', useClass: ListService },
        { provide: 'unitMessageList', useClass: ListService },
        ...]
        
      constructor(
        @Inject('list') public readonly list: ListService,
        @Inject('unitMessageList') public readonly unitMessageList: ListService,
        ...
        }
    
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.