Skip to main content

​
Get Started in 3 Steps

Get Paginator running on your local machine in just a few minutes:
1

Clone the Repository

git clone https://github.com/AndresOrozcoDev/Paginator.git
cd Paginator
2

Install Dependencies

npm install
3

Start the Dev Server

ng serve
Or use the npm script:
npm start
The application will be available at http://localhost:4200 once the dev server starts.

​
Accessing the Application

Once the development server is running, open your browser and navigate to: 
http://localhost:4200
You should see the Paginator home page with a table displaying city data.

​
Understanding the Main Page

The home page consists of several key components:

​
Header Component

The header includes:
  • Application title and branding
  • Theme toggle button (switch between light and dark modes)
  • Responsive navigation
// Theme switching is handled by ThemeService
this.themeService.toggleDarkMode();

​
Filters Component

The filters section allows you to:
  • Filter by State: Select a specific state to view cities only from that state
  • Page Size: Choose how many items to display per page (10, 25, 50, or 100)
Filters are automatically reflected in the URL query parameters: 
http://localhost:4200?state=California&pageSize=25&page=1
URL parameters enable shareable links - you can bookmark or share a specific filtered view!

​
Table Component

Displays the city data in a responsive Bootstrap table with columns for:
  • City name
  • State
  • Population (if available)
  • Other relevant data

​
Pagination Component

Navigate through pages with:
  • Previous/Next buttons
  • Direct page number selection
  • Current page indicator
  • Total records count

​
Key Features to Explore

Theme Switching

Click the theme toggle button in the header to switch between light and dark modes. Your preference is saved in localStorage.

Dynamic Filtering

Use the state dropdown to filter cities. Notice how the URL updates and the table refreshes automatically.

Pagination

Navigate between pages and adjust the page size. The pagination component shows current page and total records.

Responsive Design

Resize your browser or open on mobile to see the responsive layout powered by Bootstrap 5.

​
How It Works

Paginator uses a reactive approach with RxJS and Angular:
1

Route Parameters

The HomeComponent watches query parameters for changes:
this.route.queryParams.subscribe(params => {
  const state = params['state'] || null;
  const pageSize = params['pageSize'] ? +params['pageSize'] : 10;
  const page = params['page'] ? +params['page'] : 1;
  
  this.getCities({ state, pageSize, page });
});
2

Service Layer

LocationsService fetches data from the backend:
this.locationService.getCities(filters).subscribe({
  next: resp => {
    if (resp.success) {
      this.cities = resp.data;
      this.pagination = resp.pagination;
    }
  }
});
3

Component Communication

Components emit events when filters change:
onStateChanged(state: string | null): void {
  this.router.navigate([], {
    queryParams: { state, page: 1 },
    queryParamsHandling: 'merge'
  });
}

​
Running Tests

Paginator includes comprehensive unit tests with 90%+ code coverage: 
ng test
The coverage report will be generated in the coverage/ directory.

​
Building for Production

When you’re ready to build for production: 
ng build --configuration production
The optimized build will be created in the dist/paginator directory with:
  • Minified JavaScript bundles
  • CSS optimization
  • Tree-shaking for smaller bundle sizes
  • AOT (Ahead-of-Time) compilation
The production build includes server-side rendering (SSR) support for improved performance and SEO.

​
Project Structure Overview

Here’s how the code is organized: 
src/app/
├── core/
│   ├── components/loading/     # Loading spinner component
│   └── services/
│       ├── theme.service.ts    # Theme switching logic
│       └── loading.service.ts  # Loading state management
├── features/paginator/
│   ├── components/
│   │   ├── filters/            # State and page size filters
│   │   ├── table/              # Data table display
│   │   ├── pagination/         # Pagination controls
│   │   └── header/             # Page header
│   ├── page/home/              # Main home container component
│   ├── services/
│   │   └── locations.service.ts # Data fetching service
│   └── types/
│       └── location.ts         # TypeScript interfaces
└── app.component.ts            # Root component

​
Next Steps

Now that you have Paginator running, explore the documentation to learn more:

Components

Learn about the individual components and how they work together

Services

Understand the service layer and data management

Theming

Customize the theme and styling

Testing

Write and run tests for your features
Check out the live demo to see all features in action before diving into the code!

Build docs developers (and LLMs) love

Get started for freeTalk to us