Angular MDBootstrap Pagination Component

Last Updated : 12 Apr, 2025

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Pagination Component in Angular MDBootstap. Pagination Component allows the user to navigate data by pages.

Syntax:

<ul class="pagination">
  <li>1</li>
  <li>2</li>
</ul>

Approach:

  • Download Angular MDBootstrap
  • Extract the files and change to working directory.
  • Install npm in current project using the following command:
npm install
  • After creating your project folder i.e. appname, move to it using the following command:
cd appname
  • Start the server using the following command:
ng serve

Project Structure: After complete installation, it will look like the following:

Example 1: This is the basic example that illustrates how to use the Pagination component.

app.component.html 
<div id='gfg'>
  <h2>GeeksforGeeks</h2>
  <h4>Angular MDBootstrap Pagination Component</h4>
  <br />
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>1</a>
      </li>
      
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>2</a>
      </li>
      
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>3</a>
      </li>
      
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>4</a>
      </li>
      
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>5</a>
      </li>
      
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>6</a>
      </li>
      
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>7</a>
      </li>
    </ul>
  </nav>
</div>
app.component.ts 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }
app.module.ts 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Output:


Example 2: In this example, we will know how to add additional content in Pagination Component

app.component.html 
<div id='gfg'>
  <h2>GeeksforGeeks</h2>
  <h4>Angular MDBootstrap Pagination Component</h4>
  <br />
  <nav aria-label="Page navigation example">
    <ul class=
"pagination pagination-circle pagination-lg justify-content-center">
      <li class="page-item">
        <a class="page-link" mdbWavesEffect>1</a>
      </li>

      <li class="page-item">
        <a class="page-link" mdbWavesEffect>2</a>
      </li>

      <li class="page-item">
        <a class="page-link" mdbWavesEffect>3</a>
      </li>

      <li class="page-item">
        <a class="page-link" mdbWavesEffect>4</a>
      </li>

      <li class="page-item">
        <a class="page-link" mdbWavesEffect>5</a>
      </li>

      <li class="page-item">
        <a class="page-link" mdbWavesEffect>6</a>
      </li>

      <li class="page-item">
        <a class="page-link" mdbWavesEffect>7</a>
      </li>
    </ul>
  </nav>
</div>
app.component.ts 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }
app.module.ts 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Output:


Comment

Explore