📖 Pagination Component for Angular applications
MIT License
Install via package managers such as npm or yarn
npm install angular-paginator --save
# or
yarn add angular-paginator
Import the angular-paginator
module
import { AngularPaginatorModule } from 'angular-paginator';
@NgModule({
imports: [AngularPaginatorModule],
})
export class AppModule {}
and in the template
<div *ngFor="let item of array | angularPaginator: { currentPage: currentPage }; let i = index">
{{(currentPage - 1) * itemsPerPage + i +1}}. {{item}}
</div>
<angular-paginator (pageChange)="currentPage = $event"></angular-paginator>
The angularPaginator
pipe accepts
{
id: 'ANGULAR_PAGINATOR_DEFAULT',
itemsPerPage: 10,
currentPage: currentPage
}
ANGULAR_PAGINATOR_DEFAULT
when not specified. This is optional. Provide a unique id when multiple pagination instances are being used.[!IMPORTANT] When using an id, ensure to provide the same id in both the pipe and directive of the same instance.
<angular-paginator
id="ANGULAR_PAGINATOR_DEFAULT"
[maxSize]="5"
[rotate]="true"
[boundaryLinkNumbers]="false"
[forceEllipses]="false"
(pageChange)="currentPage = $event"
#paginator="angularPaginator"
>
</angular-paginator>
ANGULAR_PAGINATOR_DEFAULT
when not specified. This is optional. This must be provided if the id is specified in the pipe and should be the same as the pipe id[!NOTE] maxSize refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential
You can get access to the pagination instance(directive's api) using #paginator="angularPaginator"
. The following are the methods/properties available via the API
interface Page {
number: number;
text: string;
active: boolean;
}
currentPage - 1
)currentPage + 1
)