I am trying to create a simple blogging application using Angular2 with the Django Rest Framework. I use pagination in Django, but I don't know how to do it in Angular.
The API has the following structure. Entries are paginated every 5 entries.
ng2app / src / app / models / entries.model.ts
export interface IEntries { count: any, next: any, previous: any, results: IResults[] } export interface IResults { title: string, body: string, created_at: any, updated_at: any }
ng2app / src / app / services / entries.service.ts
import { Injectable } from "@angular/core"; import { Http } from "@angular/http"; import 'rxjs/add/operator/toPromise'; import { IEntries } from '../models/entries.model'; @Injectable() export class EntriesService { constructor( private http: Http ){ } getEntries(page: number){ return this.http .get(`http://127.0.0.1:8000/api/entries/?limit=5&offset=` +((page * 5)-5)) .toPromise() .then(response => response.json()) .catch(this.handleError); } private handleError(error: any) { console.error('An error occurred', error); return Promise.reject(error.message || error); } }
ng2app / src / app / services / entries.component.ts
import { Component, OnInit } from '@angular/core'; import { EntriesService } from '../services/entries.service'; import { IEntries } from '../models/entries.model'; @Component({ selector: 'my-entries', templateUrl: '../templates/entries.component.html', styleUrls: ['../static/entries.component.css'] }) export class EntriesComponent implements OnInit{ title = 'entries'; entries: IEntries[] = []; error: any; public constructor( private entriesService: EntriesService, ){} getEntires(page :number) { this.entriesService .getEntries(page) .then(entries => this.entries = entries) .catch(error => this.error = error); } ngOnInit() { this.getEntires(1); } }
ng2app / src / app / templates / entries.component.html
<div class="container"> <h2>{{title}}</h2> <div class="panel panel-default" *ngFor="let results of entries.results"> <div class="panel-heading"><a href="detail/{{ results.id }}">{{ results.title }}</a></div> <div class="panel-body pre-wrap" ng-bind="multiLineText">{{ results.body }}</div> <div class="panel-footer">{{ results.created_at | date}}</div> </div> <nav *ngIf="entries.count > 5"> (I want to display pagination here) </nav> </div>
In this case, please help how to implement pagination.