Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Styled byLS Pagination
Name 29
Name 34
Name 7
Name 16
<Pagination [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>
<div class="Row">
<div class="Col-6 Col-lg-3" *ngFor="let item of WithComponent.Items">
<div class="Card Card-body">
<h5 class="Card-title">Id: {/{item.Id}/}</h5>
<p class="Card-text">{/{item.Name}/}</p>
</div>
</div>
</div>
Items: { Id: number, Name: string }[] = [];
WithComponent: { CurrentPage: number, Items: { Id: number, Name: string }[] } = {CurrentPage: 1, Items: []};
ngOnInit(): void {
// randomly generated N = 40 length array 0 <= A[N] <= 39
this.Items = Array.from({length: 140}, () => {
const num = Math.floor(Math.random() * 40);
return {Id: num, Name: `Name ${num}`};
});
}
Name 29
Name 34
Name 7
Name 16
<!--Paged Items => Results-->
<div class="Row">
<div class="Col-6 Col-lg-3" *ngFor="let item of WithDirective.Items">
<div class="Card Card-body">
<h5 class="Card-title">Id: {/{item.Id}}</h5>
<p class="Card-text">{/{item.Name}}</p>
</div>
</div>
</div>
<!--Basic-->
<ng-container Paginate #p="PaginateApi" [Items]="Items"
[CurrentPage]="WithDirective.CurrentPage" [Size]="5" [ItemPerPage]="4"
(PageChanged)="WithDirective.CurrentPage=$event" (PagedItems)="WithDirective.Items=$event">
<nav aria-label="Lootstrap Page Navigation" *ngIf="p.Response && p.Response.Pages && p.Response.Pages.length>0">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === 1"
(click)="p.SetPage(p.Response.Req.CurrentPage - 1)">
<a class="Page-link" aria-label="Previous"><span aria-hidden="true">Prev</span></a>
</li>
<!-- Numbers -->
<li class="Page-item" (click)="p.SetPage(page.Value)"
[class.Active]="p.Response.Req.CurrentPage === page.Value" *ngFor="let page of p.Response.Pages">
<a class="Page-link" [innerHtml]="page.Label"></a>
</li>
<!-- Numbers -->
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === p.Response.TotalPages"
(click)="p.SetPage(p.Response.Req.CurrentPage + 1)">
<a class="Page-link" aria-label="Next"><span aria-hidden="true">Next</span></a>
</li>
</ul>
</nav>
</ng-container>
<!--With FA Icons-->
<ng-container Paginate #p="PaginateApi" [Items]="Items"
[CurrentPage]="WithDirective.CurrentPage" [Size]="5" [ItemPerPage]="4"
(PageChanged)="WithDirective.CurrentPage=$event" (PagedItems)="WithDirective.Items=$event">
<nav aria-label="Lootstrap Page Navigation" *ngIf="p.Response && p.Response.Pages && p.Response.Pages.length>0">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === 1" (click)="p.SetPage(1)">
<a class="Page-link" aria-label="First"><span aria-hidden="true"><i class="fa-solid fa-angles-left"></i></span></a>
</li>
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === 1"
(click)="p.SetPage(p.Response.Req.CurrentPage - 1)">
<a class="Page-link" aria-label="Previous"><span aria-hidden="true"><i class="fa-solid fa-angle-left"></i></span></a>
</li>
<!-- Numbers -->
<li class="Page-item" (click)="p.SetPage(page.Value)"
[class.Active]="p.Response.Req.CurrentPage === page.Value" *ngFor="let page of p.Response.Pages">
<a class="Page-link" [innerHtml]="page.Label"></a>
</li>
<!-- Numbers -->
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === p.Response.TotalPages"
(click)="p.SetPage(p.Response.Req.CurrentPage + 1)">
<a class="Page-link" aria-label="Next"><span aria-hidden="true"><i
class="fa-solid fa-angle-right"></i></span></a>
</li>
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === p.Response.TotalPages" (click)="p.SetPage(p.Response.TotalPages)">
<a class="Page-link" aria-label="First"><span aria-hidden="true"><i class="fa-solid fa-angles-right"></i></span></a>
</li>
</ul>
</nav>
</ng-container>
<!--With FA Icons-->
<ng-container Paginate #p="PaginateApi" [Items]="Items"
[CurrentPage]="WithDirective.CurrentPage" [Size]="5" [ItemPerPage]="4"
(PageChanged)="WithDirective.CurrentPage=$event" (PagedItems)="WithDirective.Items=$event">
<nav aria-label="Lootstrap Page Navigation" *ngIf="p.Response && p.Response.Pages && p.Response.Pages.length>0">
<ul class="Pagination Justify-content-center MY-2">
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === 1" (click)="p.SetPage(1)">
<a class="Page-link" aria-label="First">
<span aria-hidden="true"><i class="fa-solid fa-circle-arrow-left"></i></span>
</a>
</li>
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === 1"
(click)="p.SetPage(p.Response.Req.CurrentPage - 1)">
<a class="Page-link" aria-label="Previous">
<span aria-hidden="true"><i class="fa-solid fa-circle-chevron-left"></i></span>
</a>
</li>
<!-- Numbers -->
<li class="Page-item" (click)="p.SetPage(page.Value)"
[class.Active]="p.Response.Req.CurrentPage === page.Value" *ngFor="let page of p.Response.Pages">
<a class="Page-link" [innerHtml]="page.Label"></a>
</li>
<!-- Numbers -->
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === p.Response.TotalPages"
(click)="p.SetPage(p.Response.Req.CurrentPage + 1)">
<a class="Page-link" aria-label="Next">
<span aria-hidden="true"><i class="fa-solid fa-circle-chevron-right"></i></span>
</a>
</li>
<li class="Page-arrow" [class.Disabled]="p.Response.Req.CurrentPage === p.Response.TotalPages" (click)="p.SetPage(p.Response.TotalPages)">
<a class="Page-link" aria-label="First">
<span aria-hidden="true"><i class="fa-solid fa-circle-arrow-right"></i></span>
</a>
</li>
</ul>
</nav>
</ng-container>
Items: { Id: number, Name: string }[] = [];
WithDirective: { CurrentPage: number, Items: { Id: number, Name: string }[] } = {CurrentPage: 1, Items: []};
ngOnInit(): void {
// randomly generated N = 40 length array 0 <= A[N] <= 39
this.Items = Array.from({length: 140}, () => {
const num = Math.floor(Math.random() * 40);
return {Id: num, Name: `Name ${num}`};
});
}
Fancy larger or smaller pagination? Add [Sizing] prop for additional sizes.
<!--Large-->
<Pagination [Sizing]="'Large'" [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>
<!--Small-->
<Pagination [Sizing]="'Small'" [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>
Add [Shape] prop to change the shape to a circle.
<Pagination [Shape]="'Circle'" [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>
Use [Alignment] prop to center or end the pagination.
<Pagination [Alignment]="'Start'" [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>
<Pagination [Alignment]="'Center'" [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>
<Pagination [Alignment]="'End'" [Items]="Items" [CurrentPage]="WithComponent.CurrentPage" [ItemPerPage]="4" [Size]="7"
(PagedItems)="WithComponent.Items = $event"
(PageChanged)="WithComponent.CurrentPage=$event"></Pagination>