d

src/app/game-grid/game-grid.component.html

@@ -48,6 +48,15 @@
 </div>
 </div>
 
+<div class="row">
+	<div class="col-sm-6 text-center">
+		 <ul class="pagination">
+		 	<li *ngFor="#item of queryMaxPages; #i = index"><a href="#">1</a></li>
+		 </ul>
+	</div>
+</div>
+
+
 <div class="row">
 	<div class="col-sm-6 text-center">
 		<button *ngIf="showBack" class="btn btn-primary" (click)="backPage()">Back Page</button>

src/app/game-grid/game-grid.component.ts

@@ -23,7 +23,9 @@ export class GameGridComponent implements OnInit {
 	queryFilters = "";
 	querryPage = 1;
 	queryOrder = "Title";
-	queryRecordMax = 10;
+	queryRecordMax = 9;
+	queryMaxPages = 0;
+	index = 0;
 	
 	showNext = true;
 	showBack = false;
@@ -45,6 +47,9 @@ export class GameGridComponent implements OnInit {
 		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.queryRecordMax ).subscribe( data => {
 			this.gamesData = data.games;
 
+			this.queryMaxPages = Math.round( data._results / this.queryRecordMax );
+			console.log( this.queryMaxPages );
+
 			if( this.gamesData.length < this.queryRecordMax ){
 				this.showNext = false;
 			}else{

src/app/games.service.ts

@@ -38,6 +38,8 @@ export class GamesService {
 	getGames( queryFilters, querryPage, queryOrder, queryRecordMax ): Observable<any> {
 		return this.http.get( this.APIURL + "/games?filter="+ queryFilters +"&page="+ querryPage + "," + queryRecordMax +"&order="+ queryOrder +"&transform=1" )
 			.map(res => {
+									console.log( res );
+
 				return(
 					res
 				);