How to do server side pagination on angular with entity framework core

Follow steps below to achieve your requirement:

1. Define a model which will return items count and item details:

   public class PageResult<T>
   {
       public int Count { get; set; }
       public int PageIndex { get; set; }
       public int PageSize { get; set; }
       public List<T> Items { get; set; }
   }
   

2. Controller action

   public PageResult<ScrapeTime> scrapeTime(int? page, int pagesize = 10)
   {
       var countDetails = _context.ScrapeTime.Count();
       var result = new PageResult<ScrapeTime> {
           Count = countDetails,
           PageIndex = page ?? 1,
           PageSize = 10,
           Items = _context.ScrapeTime.Skip((page - 1 ?? 0) * pagesize).Take(pagesize).ToList()
       };
       return result;
   }
   

3. Angular Model

   class PageResult<T>
   {
       count: number;
       pageIndex: number;
       pageSize: number;
       items: T[];
   }
   

4. Angular action

   export class FetchDataComponent {
   private http: HttpClient;
   private baseUrl: string;
   public Time: scrapeTime[];
   public pageNumber: number = 1;
   public Count: number;
   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
       this.http = http;
       this.baseUrl = baseUrl;
   
       http.get<PageResult<scrapeTime>>(baseUrl + 'api/ScrapeTime/ScrapeTime').subscribe(result => {
       this.Time = result.items;
       this.pageNumber = result.pageIndex;
       this.Count = result.count;
       }, error => console.error(error));
   }
   
   public onPageChange = (pageNumber) => {
       this.http.get<PageResult<scrapeTime>>(this.baseUrl + 'api/ScrapeTime/ScrapeTime?page=' + pageNumber).subscribe(result => {
       this.Time = result.items;
       this.pageNumber = result.pageIndex;
       this.Count = result.count;
       }, error => console.error(error));
   }
   }
   

5. View

   <table>
       <tr *ngFor="let item of Time | paginate: { itemsPerPage: 10, currentPage: pageNumber, totalItems:Count }">
           <!-- content here -->
           <td>{{ item.id }}</td>
           <td>{{ item.name }}</td>
       </tr>
       <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
   </table>
   

If you have any issue with angular pagination, follow ngx-pagination