UI fix

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

@@ -3,11 +3,10 @@ import { HttpClient } from '@angular/common/http';
 import { ActivatedRoute } from '@angular/router';
 
 import { GamesService } from '../games.service';
+import {PageEvent} from '@angular/material';
+
 
-declare var jquery:any;
-declare var $ :any;
 
-declare var masonry:any;
 
 @Component({
   selector: 'app-game-grid',
@@ -23,10 +22,11 @@ export class GameGridComponent implements OnInit {
 	queryFilters = "";
 	querryPage = 1;
 	queryOrder = "Title";
-	queryRecordMax = 10;
+
+	length = 100;
+	pageSize = 10;
+	pageSizeOptions = [5, 10, 25, 50, 100];
 	
-	showNext = true;
-	showBack = false;
 
 	constructor(
 		private route: ActivatedRoute,
@@ -42,20 +42,9 @@ export class GameGridComponent implements OnInit {
 
 	getGamesList(): any{
 
-		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.queryRecordMax ).subscribe( data => {
+		this.gameListSubscription = this.gamesService.getGames( this.queryFilters, this.querryPage, this.queryOrder, this.pageSize ).subscribe( data => {
+			this.length = data["_results"];
 			this.gamesData = data.games;
-
-			if( this.gamesData.length < this.queryRecordMax ){
-				this.showNext = false;
-			}else{
-				this.showNext = true;
-			}
-			if( this.querryPage != 1 ){
-				this.showBack = true;
-			}else{
-				this.showBack = false;
-			}
-			
 		});
 	}
 
@@ -78,28 +67,20 @@ export class GameGridComponent implements OnInit {
 		return (obj == undefined);
 	}
 
-	renderGridItems(lastItem: boolean) {
-		if (lastItem) {
-			$('.grid').masonry({
-				columnWidth: 250,
-				itemSelector: '.grid-item',
-				gutter: 10
-				
+	// MatPaginator Output
+	pageEvent: PageEvent;
 
-			});
-			
+	paginatorChange(event){
+		if( event.pageSize != this.pageSize ){
+			this.pageSize  = event.pageSize;
+			this.getGamesList();
+		}
+		if( event.pageIndex != (this.querryPage -1) ){
+			this.querryPage = event.pageIndex+1;
+			this.getGamesList();
 		}
-
 	}
 
-	nextPage(){
-		this.querryPage++;
-		this.getGamesList();
-	}
-	backPage(){
-		this.querryPage--;
-		this.getGamesList();
-	}
 
 
 }