Pagination on Angular 6

Question

I'm trying to make a table that contains username and achievement. This dynamic data just generated by MySQL that I call with function .subscribe on angular 6.

My problem right now is, How to adding pagination on my data table in order to make a responsive table view.

My page right now :

My dashboard.component.ts

@Component({
  selector: 'app-dashboard',
  templateUrl: './activity-dashboard.component.html',
  styleUrls: ['./activity-dashboard.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class ActivityComponent implements OnInit {
  tablePresetColumns;
  tablePresetData;

  constructor(
    private activityService: ActivityService,
    private router: Router
  ) {}

  public apiData;

  ngOnInit() {
    this.activityService.getAchievement().subscribe((res) => {
      this.apiData = res;
      var ids = [
        ['Username', 1],
        ['Role', 2],
        ['today', 3],
        ['weekly', 4],
        ['monthly', 5],
        ['yearly', 6]
      ];
      const result = Object.keys(res).map(o => ids.map(
        ([key, id]) => ({
          id,
          content: res[o][key]
        })));
      this.tablePresetData = result;
    });
  }
}

My dashboard.component.html :

<div class="row">
  <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-tile-actions></eds-tile-actions>
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
    <div class="pagination-group">
      <ul class="pagination">
        <li class="disabled"><i class="icon icon-arrow-left"></i></li>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li></li>
        <li>10</li>
        <li><i class="icon icon-arrow-right"></i></li>
      </ul>
    </div>
</div>

so far, I've tried to make the pagination as HTML, but I'm confused to combine my data with pagination function that I will create.

What should I do to make the pagination works as my expectation?

Answer 1

you could use the ngx-pagination package https://www.npmjs.com/package/ngx-pagination instead of reinventing the wheel with

import it in your module

// app.module.ts
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module

@NgModule({
    imports: [... NgxPaginationModule ...], // <-- include it in your app module
})
export class MyAppModule {}

and in your template

<div class="row">
  <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-tile-actions></eds-tile-actions>
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
    <div class="pagination-group">
      <ul>
        <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
      </ul>

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

where p is the current page to be displayed so in your component add

public p: number = 1;

complete documentation can be found here https://github.com/michaelbromley/ngx-pagination