Paginator

If you have a website with lots of pages, you may wish to add some sort of pagination to each page:

free

Default Paginator

Use component <base-paginator></base-paginator>. And put the required pages with the component <base-p-page></base-p-page> inside. Add [active]="true" in <base-p-page> if you want to make that page active. Check example below.

Paginator with arrows

Add an input <[arrows]="true"> to get arrows instead words for navigation. Check example below

Base Paginator

To get specially designed from our team complex paginator use <[basePaginator]="true"> into the component. Check example below.

Installation

Run the following command to add this component to your project:

npx base-ui-cli add paginator

npx -y base-ui-mcp

// Install: npx base-ui-cli add paginator
// Paths are relative to aliases.components (default: src/app/components)
import { PPageComponent } from './paginator/p-page/p-page.component';
import { PaginatorComponent } from './paginator/paginator.component';

@Component({
  selector: 'app-your-component',
  imports: [
    PPageComponent,
    PaginatorComponent
  ],
  template: `...`
})
export class YourComponent {}