Home Angular7 Angular 7 Pagination Working Example

Angular 7 Pagination Working Example

by therichpost
0 comment
angular7

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Pagination Working Example.

If you are new in Angular 7, then please check my old posts related to Angular 7.

In this post, I am making custom pagination with bootstrap styling in Angular 7.


Angular 7 Pagination Working Example

Here is the complete code for Angular 7 Pagination Working Example


1. Here is the code for app.component.html file and I have used bootstrap for better styling:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style type="text/css">
    .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 49%;
    background: #eee;
    float: left;
    margin: 5px;
    display: none;
}
  </style>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Angular 7 Custom pagination Working Example:-</h1> 
</div>
  <div class="container">    
    <div class="row" id="mainDiv">
      <div class="col-sm-6">
        1.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-sm-6">
        2.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
      </div>
      <div class="col-sm-6">
        3.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-sm-6">
        4.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
      </div>
      <div class="col-sm-6">
        5.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-sm-6">
        6.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
      </div>
      <div class="col-sm-6">
        7.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-sm-6">
        8.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
      </div>
      <div class="col-sm-6">
        9.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-sm-6">
        10.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.    
      </div>
       <ul class="pagination pagination">
        <li class="page-item" *ngFor="let number of data">
          <a class="page-link" href="#" (click) = "textVal($event)">{{number}}</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

 

 

1. Here is the code for app.component.ts file:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title  = 'angularcustompaging';
  maxdiv = 4;
  divtotalCount : any;
  numofPages    : any;
  data = [];
  ngOnInit() {
    this.divtotalCount = document.getElementsByClassName("col-sm-6").length;
    this.numofPages = Math.ceil(this.divtotalCount/this.maxdiv);
  for(var i = 1; i <= this.numofPages; i++) {
      this.data.push(i);
  }

  var mainDiv = document.getElementById('mainDiv');
  for (var i = 0; i < this.maxdiv; i++) {
      mainDiv.children[i].setAttribute("style", "display:block");
  }

  for(var i = 0; i < this.divtotalCount; i++)
  {

    if(i<=4)
    {
      mainDiv.children[i].setAttribute("pagenum", "1");
    }
    if(i>=4 && i<=8)
    {
      mainDiv.children[i].setAttribute("pagenum", "2");
    }
    if(i>=8 && i<=12)
    {
      mainDiv.children[i].setAttribute("pagenum", "3");
    }
  
  }
  
  }

  textVal(event)
  {
      var pagesNum = event.target.innerText;
      
      var hideDiv  = document.querySelectorAll('div[pagenum]');
      hideDiv.forEach(function(item)
      {
        item.setAttribute("style", "display:none;");
      })
      hideDiv[0].setAttribute("style", "display:none");
      var showDiv  = document.querySelectorAll('[pagenum="'+pagesNum+'"]');
      showDiv.forEach(function(item)
      {
        item.setAttribute("style", "display:block");
      })
  }
  
}

 


This is just custom pagination with custom values and in next post, I will come custom pagination with dynamic values.

If you have any query regarding to this post, then please let me know.

Harjas,

Thank you

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.