https://github.com/manthanank/ng-pagination
Ng Pagination
https://github.com/manthanank/ng-pagination
angular ng-pagination pagination
Last synced: 2 months ago
JSON representation
Ng Pagination
- Host: GitHub
- URL: https://github.com/manthanank/ng-pagination
- Owner: manthanank
- Created: 2024-03-25T15:44:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-08T15:44:41.000Z (over 1 year ago)
- Last Synced: 2025-10-25T04:56:51.660Z (8 months ago)
- Topics: angular, ng-pagination, pagination
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ng Pagination
This is a simple pagination library for Angular applications.
## Installation
To install this library, run:
```bash
npm install @manthanankolekar/ng-pagination
```
## Usage
Import in your `app.component.ts`:
```typescript
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgPaginationComponent } from '../../../ng-pagination/src/lib/ng-pagination.component';
interface Item {
id: number;
title: string;
description: string;
}
@Component({
selector: 'app-root',
imports: [NgPaginationComponent, CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
title = 'Pagination Example';
items: Item[] = [];
displayedItems: Item[] = [];
totalItems = 100;
itemsPerPage = 10;
currentPage = 1;
ngOnInit() {
// Generate dummy data
this.items = Array.from({ length: this.totalItems }, (_, i) => ({
id: i + 1,
title: `Item ${i + 1}`,
description: `Description for item ${i + 1}`
}));
this.updateDisplayedItems();
}
onPageChange(page: number) {
this.currentPage = page;
this.updateDisplayedItems();
}
onItemsPerPageChange(itemsPerPage: number) {
this.itemsPerPage = itemsPerPage;
this.updateDisplayedItems();
}
private updateDisplayedItems() {
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
this.displayedItems = this.items.slice(startIndex, endIndex);
}
}
```
Add the following to your `app.component.html`:
```html
```
## Demo
[StackBlitz](https://stackblitz.com/edit/ng-pagination)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.