PrimeNG Table - Lazy Mode | Server Side Pagination | Lazy Loading | Angular

[@merdankuliyev2998]

Thank you very much for your explaining! You are doing a great job!

[@Md.AbdurRouf-f5n]

Thank you for explaining! It helped a lot!

[@crazytk16]

The video I needed it!

[@neduj376]

SO many thaks to you!

[@xpnhcnsh]

thanks for demo!

[@mahmoudsayed133]

Nice explaining thanks

[@xpnhcnsh]

Hi, to use Primeng pagination, does the index of the data have to be self-grow INT number? Will it work if the database index is GUID?

[@MatichekYoutube]

Hi, nice tutorial. Small mistake I think it is "loadProducts($event: TableLazyLoadEvent)" - not loadProducts($event: LazyLoadEvent) Edit 2: how would you implement sort? Edit 3: Angular version is newer so different syntax

[@haseena.khader]

Thanks @MatichekKZbin For primeng 14 it will be LazyLoadEvent and in 16 it is TableLazyLoadEvent. For implementing the sorting (for eg: sort by id), add the below code in thead th id then on click of that button , onLazyLoad will trigger with LazyLoadEvent or TableLazyLoadEvent which will have sortField as "id" sortOrder. you can pass those to api to fetch sorted data. pass the correct sortField and SortOrder to api

[@MatichekYoutube]

@@haseena.khader thank you, will check it out. Oh ya, the version are different you are right.

[@saiprathap9550]

@@haseena.khader for primg ng 17 which one to use LazyLoadEvent or TableLazyLoadEvent , TableLazyLoadEvent is not showing in primengapi

[@saiprathap9550]

@@haseena.khader on click of sort icon the in component file the method which we have written will it automatically gets called?

[@saiprathap9550]

loadUsers(event: TableLazyLoadEvent ) { console.log('event',event); this.loading = true; const page = (event.first || 0) / (event.rows || 0); const size = event.rows || 10; const sortField = event.sortField || 'name'; const sortOrder = event.sortOrder === 1 ? 'asc' : 'desc'; this.userService.getAllUsersData(sortField,sortOrder,page, size).subscribe( (response) => { this.users= response?.allUserModel; this.totalRecords = response.totalCount; this.loading = false; }, (error) => { console.error('Error loading data', error); this.loading = false; } ); } this is my ts Name this is my html how to implement server side sorting

[@afrazsheikh9822]

I need help in p-dropdown In my case lazyloadEvent is not firing

[@haseena.khader]

I didnt tried that yet. I can some opened issue regarding that. Did you try with virtualScroll enabled ?

[@adityateja8859]

Hi Need help with that. Unable to get it worked. Plz help me

[@haseena.khader]

What is the error?

[@sarathgangadharan960]

Thank you @learnFromScratch it saved my day