1

How to do a pagination status in an angular project like this (dynamically)

I use ngx-pagination

project

enter image description here

enter image description here

sHaRjAs
  • 153
  • 1
  • 3
  • 15
  • I don't get the problem? can you explain what is? – Mohammad Babaei Dec 24 '21 at 07:03
  • Hi, @MohammadBabaei I have already done pagination in my project. I want to show pagination status dynamically – sHaRjAs Dec 24 '21 at 08:04
  • what dynamically means in this example? please provide more info. – Mohammad Babaei Dec 24 '21 at 08:12
  • dynamically means when I click '1' in pagination, then the status shows "Showing 1–10 of 100 results", then click '2' in pagination the text change show "Showing 1–10 of 100 results" to show "Showing 11–20 of 100 results" – sHaRjAs Dec 24 '21 at 09:57
  • You have page number binded with (pageChange)="p = $event" to p And also you have page length and total count so you can calculate and render all header status . Also you can dig in doc mabye there would be output for all values – Mohammad Babaei Dec 24 '21 at 14:06

1 Answers1

1

Here the solution

Stackblitz - my project

component.html

<div class="text-center">
  <h1>ngx-pagination live demo</h1>
</div>

<div class="list">

  <ul
    *ngFor="
      let item of collection | paginate: { itemsPerPage: 10, currentPage: p };
      let ndx = index
    "
  >
    <li>
      {{ item }}
    </li>
  </ul>
  <div class="text-center">Showing {{start==null?1:start }} - {{last==null?10:last}} of 100 results</div>

  <pagination-controls
    (pageChange)="listCount($event)"
    (pageChange)="p = $event"
  ></pagination-controls>
</div>

app.component.css

:host {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.text-center {
  text-align: center;
}

.list {
  max-width: 550px;
  margin: auto;
}

li {
  margin-bottom: 5px;
}

app.component.ts

import { Component } from '@angular/core';
import { Console } from '@angular/core/src/console';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  collection = [];
  start;
  last;
  constructor() {
    for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }
  
  listCount(count) {
    this.start = count
    this.start = this.start * 10 - 9
    this.last = count * 10
    if (this.last > this.collection.length) {
      this.last = this.collection.length;
    }
    console.log('start'+ '      '+this.start + '      '+'last' + '      '+ this.last);
  }
}
sHaRjAs
  • 153
  • 1
  • 3
  • 15