Server Side Pagination using Angular and ASP.NET Core

dotnet new webapi -n GridDemo
cd GridDemo

namespace GridDemo.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

using Microsoft.EntityFrameworkCore;
using GridDemo.Models;

namespace GridDemo.Data
{
    public class ProductContext : DbContext
    {
        public ProductContext(DbContextOptions<ProductContext> options) : base(options) { }

        public DbSet<Product> Products { get; set; }
    }
}

{
    "ConnectionStrings": {
        "DefaultConnection": "YourConnectionStringHere"
    },
    // ... other settings
}

services.AddDbContext<ProductContext>(options =>
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddControllers();

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using GridDemo.Data;
using GridDemo.Models;
using System.Linq;
using System.Threading.Tasks;

namespace GridDemo.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ProductsController : ControllerBase
    {
        private readonly ProductContext _context;

        public ProductsController(ProductContext context)
        {
            _context = context;
        }

        [HttpGet]
        public async Task<IActionResult> GetProducts([FromQuery] int page = 1, [FromQuery] int pageSize = 10, [FromQuery] string filter = "")
        {
            var query = _context.Products.AsQueryable();

            if (!string.IsNullOrEmpty(filter))
            {
                query = query.Where(p => p.Name.Contains(filter));
            }

            var totalRecords = await query.CountAsync();
            var products = await query.Skip((page - 1) * pageSize).Take(pageSize).ToListAsync();

            return Ok(new { Data = products, TotalRecords = totalRecords });
        }
    }
}

ng new grid-demo
cd grid-demo

npm install @ng-bootstrap/ng-bootstrap bootstrap

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

ng generate service services/product

// src/app/services/product.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = 'https://localhost:5001/api/products';

  constructor(private http: HttpClient) { }

  getProducts(page: number, pageSize: number, filter: string = ''): Observable<any> {
    let params = new HttpParams()
      .set('page', page.toString())
      .set('pageSize', pageSize.toString());

    if (filter) {
      params = params.set('filter', filter);
    }

    return this.http.get(this.apiUrl, { params });
  }
}

ng generate component components/product

// src/app/components/product/product.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  products = [];
  totalRecords = 0;
  pageSize = 10;
  page = 1;
  filter = '';

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.loadProducts();
  }

  loadProducts(): void {
    this.productService.getProducts(this.page, this.pageSize, this.filter).subscribe(data => {
      this.products = data.data;
      this.totalRecords = data.totalRecords;
    });
  }

  onPageChange(page: number): void {
    this.page = page;
    this.loadProducts();
  }

  onFilterChange(filter: string): void {
    this.filter = filter;
    this.loadProducts();
  }
}

<!-- src/app/components/product/product.component.html -->
<div class="container mt-5">
  <div class="mb-3">
    <input type="text" class="form-control" placeholder="Filter" (input)="onFilterChange($event.target.value)">
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of products">
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
      </tr>
    </tbody>
  </table>

  <ngb-pagination [collectionSize]="totalRecords" [(page)]="page" [pageSize]="pageSize" (pageChange)="onPageChange($event)"></ngb-pagination>
</div>

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { ProductComponent } from './components/product/product.component';
import { ProductService } from './services/product.service';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

dotnet run

ng serve