ANGULAR 11 PAGINATION EXAMPLE | ANGULAR 11 TUTORIAL

Share the post

Hello All, Today we are going to discuss How to implement pagination in angular applications? For the last few days we are talking with Ionic & react native application development, but today we move one step ahead and learn about angular 11. Angular is getting popular to develop progressive web applications (PWA). So, therefore I thought that you have to learn this language also with some basic examples. I think that to learn any language the example is very much important. So, here in this example, We include grocery items to our list with pagination and will create an angular pagination example.

Angular Version using in this example

You can check the version by writing the following command in CLI

ng version
Angular CLI: 11.2.9
Node: 10.15.3
OS: win32 x64

Angular: 11.2.10
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router     
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------  
@angular-devkit/architect       0.1102.9
@angular-devkit/build-angular   0.1102.9
@angular-devkit/core            11.2.9
@angular-devkit/schematics      11.2.9
@angular/cli                    11.2.9
@schematics/angular             11.2.9
@schematics/update              0.1102.9
rxjs                            6.6.7
typescript                      4.1.5

Steps to implement pagination example in angular 11 application

Step 1 : Install angular using node

npm install -g @angular/cli

Step 2: Create a new angular project using following command

ng new angular-pagination-example

Step 3 : Create a new component using following command

ng g component pagination

Step 4 : Install dependency using npm

npm i ngx-pagination

We are using the ngx-pagination library to implement pagination in our angular application.

Step 5: Change in app.module.ts

import the ngx-pagination module as follows

import { NgxPaginationModule } from 'ngx-pagination';

add the module in imports

@NgModule({
  declarations: [
    AppComponent,
    PaginationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxPaginationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

The full app.module.ts will look like this

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PaginationComponent } from './pagination/pagination.component';

import { NgxPaginationModule } from 'ngx-pagination';


@NgModule({
  declarations: [
    AppComponent,
    PaginationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxPaginationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 6 : Change in app.component.html

<div>

  <h1>Angular 11 - Pagination Example</h1>

  <app-pagination></app-pagination>
</div>

We added our new generated pagination selector.

Step 7 : Change in pagination.component.html

<p>pagination works!</p>


<div>
    <ul *ngFor="let item of data | paginate: { itemsPerPage: 8, currentPage: cp }" class="listMargin">
        {{item.itemName}}
    </ul>

    <pagination-controls (pageChange)="cp = $event"></pagination-controls>

</div>

We have created a ngFor loop to display grocery list items.<pagination-controls> will do the rest things for us.

Step 8: Change in pagiation.component.scss

.listMargin{

    margin : 5px;
}

Step 9 : Change in pagination.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {

  cp: number = 1;
  data: any = [
    { itemName: 'toothpase' },
    { itemName: 'salt' },
    { itemName: 'sugar' },
    { itemName: 'oil' },
    { itemName: 'toothpase' },
    { itemName: 'salt' },
    { itemName: 'sugar' },
    { itemName: 'oil' },
    { itemName: 'toothpase' },
    { itemName: 'salt' },
    { itemName: 'sugar' },
    { itemName: 'oil' },
  ];
  constructor() { }

  ngOnInit(): void {
  }



}

Step 10: Output

cd angular-pagination-example
ng serve
output_angular11_pagination
Output
Output

Leave a Comment