Angular + Bulma - pagination
- Install packages
npm i ngx-bulma-pagination- Import a module
// app.module.ts
...
import { NgxBulmaPaginationModule } from "ngx-bulma-pagination";
@NgModule({
...,
imports: [
...,
NgxBulmaPaginationModule
],
...
})
export class AppModule { }- Using a component
<ngx-bulma-pagination ...></ngx-bulma-pagination>- max : Total count. default is
100. - count : Number of buttons per group. default is
10.
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)"></ngx-bulma-pagination>
- isRounded :
false(square, default),true(rounded)
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [isRounded]="true"></ngx-bulma-pagination>
- size :
is-small(default),is-medium,is-large
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [size]="'is-small'"></ngx-bulma-pagination>
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [size]="'is-medium'"></ngx-bulma-pagination>
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [size]="'is-large'"></ngx-bulma-pagination>
- size :
is-centered(default),is-left,is-right
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [order]="'is-centered'"></ngx-bulma-pagination>
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [order]="'is-left'"></ngx-bulma-pagination>
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [order]="'is-right'"></ngx-bulma-pagination>
- previous : default is
<< - next : default is
>>
<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [previous]="'←'" [next]="'→'"></ngx-bulma-pagination>