NgxBulmaPagination

Angular + Bulma - pagination

Quick Start

1. Install packages

npm i --save bulma ngx-bulma-pagination

2. Import a module

// app.module.ts

...
import { NgxBulmaPaginationModule } from "ngx-bulma-pagination";

@NgModule({
  ...,
  imports: [
    ...,
    NgxBulmaPaginationModule
  ],
  ...
})
export class AppModule { }

3. Using a component

<ngx-bulma-pagination ...></ngx-bulma-pagination>

Example

Basic

• 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>

Style

• isRounded : false(square, default), true(rounded)

<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [isRounded]="true"></ngx-bulma-pagination>

Size

• 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>

Alignment

• 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, Next

• previous : default is <<
• next : default is >>

<ngx-bulma-pagination [max]="30" [count]="10" (pageChange)="pageChange($event)" [previous]="'←'" [next]="'→'"></ngx-bulma-pagination>