How to apply pagination on web api and angular ?

ahmed salah

I work on single page application web api .net core 5 with angular 11

i need to get any source code sample web site or links or full sample or github links

that applying or implemetation code for pagination to web api .net core with angular 11

so can you help me please ?

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Yelve3y ago
https://dzone.com/articles/server-side-pagination-using-aspnet-core-and-angul
Vishal Joshi3y ago
Hello,

Please check the below link for the pagination in angular using the npm package.

https://www.npmjs.com/package/ngx-pagination
Sachin Singh3y ago
On API side, create your Stored procedures like below
```
Create procedure GetAll
@PageNumber INT=0,
@RowsOfPage INT=10
as
begin
SET @PageNumber=2
SET @RowsOfPage=4
SELECT * FROM TableName
ORDER BY Price 
OFFSET (@PageNumber-1)*@RowsOfPage ROWS
FETCH NEXT @RowsOfPage ROWS ONLY
end
```
On angular side you can use any plugin that takes two parameter pageNumber and PageSize (by default i have set it to 1 and 10 respectively meaning 10 records per page).