Silicon Ng Paginate

Silicon Ng Paginate is an Angular component for pagination with customizable features.

Installation

To install Silicon Ng Paginate in your Angular project, simply run:

npm install silicon-ng-paginate

Usage

1. Import the SiliconNgPaginateModule in your Angular module:

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { SiliconNgPaginateModule } from 'silicon-ng-paginate'; // Import from the package
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       SiliconNgPaginateModule // Use the imported module
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

2. Use the <silicon-ng-paginate> component in your Angular templates:

   <silicon-ng-paginate
     [totalItems]="totalItems"
     [itemsPerPage]="itemsPerPage"
     [currentPage]="currentPage"
     [pageRange]="pageRange"
     [showFirstLast]="true"
     (pageChanged)="onPageChanged($event)">
   </silicon-ng-paginate>

3. Adjust the component inputs and outputs as needed:

   • totalItems: Total number of items.
   • itemsPerPage: Number of items per page.
   • currentPage: Current page.
   • pageRange: Number of pages to display around the current page.
   • showFirstLast: Whether to display the "First" and "Last" page buttons.
   • (pageChanged): Event emitted when the page changes.

Example

Here's an example of how to use Silicon Ng Paginate in your Angular project:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  totalItems = 100; // Example total number of items
  itemsPerPage = 10; // Example number of items per page
  currentPage = 1; // Initial current page
  pageRange = 2; // Number of pages to display around the current page

  onPageChanged(page: number): void {
    this.currentPage = page;
    console.log(`Current page: ${this.currentPage}`);
    // Add your logic to handle page change
  }
}

<div>
  <silicon-ng-paginate
    [totalItems]="totalItems"
    [itemsPerPage]="itemsPerPage"
    [currentPage]="currentPage"
    [pageRange]="pageRange"
    [showFirstLast]="true"
    (pageChanged)="onPageChanged($event)">
  </silicon-ng-paginate>
</div>