1.0.0 • Published 2 years ago
ng1x-pager v1.0.0
Ng1-Pager
A simple library to achieve pagination in angular using bootstrap 5
How to Use
BS 5
Copy-paste the bs5 stylesheet <link> into your <head> of index.html
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>Import NgPagerModule
import NgPagerModule to your module
imports: [
----,
NgPagerModule,
---
],In Component view use this like this
<ng-pager [totalItems]="75" (pageChanged)="pageChanged($event)"></ng-pager>Parameters
<ng-pager/> accepts
| Parameter | Type | Example |
|---|---|---|
| totalItems | Number | 10 |
| pageChanged | EventEmitter<number> | <ng-pager [totalItems]="75" (pageChanged)="pageChanged($event)"></ng-pager> |
Example Usage
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgPagerModule } from "projects/ng-pager/src/public-api";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, NgPagerModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}app.component.html
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
title = "ng-gpst";
currentPage: number = 1;
pageChanged(page: number) {
this.currentPage = page;
}
}app.component.html
<div class="container mt-5">
<ng-pager [totalItems]="75" (pageChanged)="pageChanged($event)"></ng-pager>
<p>Emited Page number {{currentPage}}</p>
</div>