Paginación en news, falta en home

Author: JLRR2019

frontend/src/app/components/news/news.component.html

@@ -26,20 +26,25 @@ <h1 class="fw-bolder fs-5 mb-4">Noticias destacadas</h1>
 <section class="py-5">
   <div class="container px-5">
     <h2 class="fw-bolder fs-5 mb-4">Noticias que te pueden interesar.</h2>
-    <div id="moreImages" class="row gx-5">
+    <div id="moreImages" class="row gx-5" *ngIf="ready">
       <newsTemplate class="col-lg-4 mb-5" *ngFor="let ng of news" [news]="ng"></newsTemplate>
     </div>
     <div class="text-end mb-5 mb-xl-0">
-      <a class="text-decoration-none" href="#!">
-        <!--will show next-->
-        <!-- puts the variable created in execution ?page and associates it with next page which is getNumber + 1 (that is, we add 1)-->
-        <!--in request of we put (page, 3) and page will be equal to 1 for what I just explained above, this is how it is done-->
-        <a id="moreImagesButton" class="btn btn-secondary button">
-          <i class="fa fa-eye"></i> Más contenido
-        </a>
-        <div id="loader"></div>
+      <a class="text-decoration-none">
+          <button class="btn btn-secondary button" (click)="nextpage()" >
+              <i class="fa fa-eye"></i> Pagina siguiente
+          </button>
+          <div id="loader"></div>
       </a>
-    </div>
+  </div>
+  <div *ngIf="page > 0" class="text-end mb-5 mb-xl-0">
+      <a class="text-decoration-none">
+          <button class="btn btn-secondary button" (click)="prevpage()" >
+              <i class="fa fa-eye"></i>  Pagina anterior
+          </button>
+          <div id="loader"></div>
+      </a>
+  </div>
 
 
   </div>

frontend/src/app/components/news/news.component.ts

@@ -13,20 +13,47 @@ export class NewsComponent{
 
   //25: int;
   //25: int;
+  page:number = 0;
   ready: boolean = false;
   news!: News[];
   imagesCarousel = ['assets/images/ diabloIV.jgp', 'assets/images/ overwatch2.jpg', 'assets/images/ marioKart9.jgp']
 
   constructor(private router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute){
 
-    const id = activatedRoute.snapshot.params['id'];
-        this.newsService.getNews().subscribe(
-            (news) => this.news =  news as News[], //casting in ts, es mejor hacerlo en el servicio (as Observable<News>), pero al dar error, hacemos el cast en el component
+
+        this.newsService.findNewsPage(this.page).subscribe(
+            (news) => {var x = news['content'] ;this.news = x as News[];}, //casting in ts, es mejor hacerlo en el servicio (as Observable<News>), pero al dar error, hacemos el cast en el component
             (error: any) => console.error(error)
+        );
 
+  }
 
-        );
+  ngOnInit(){
+    this.ready = true;
+  }
+
+  nextpage(){
+    this.changepage(1)
+    this.newsService.findNewsPage(this.page).subscribe(
+      (news) => {var x = news['content'] ;this.news = x as News[];},
+      (error: any) => console.error(error)
+  );
+  }
+
+  prevpage(){
+    this.changepage(-1)
+    this.newsService.findNewsPage(this.page).subscribe(
+      (news) => {var x = news['content'] ;this.news = x as News[];},
+      (error: any) => console.error(error)
+  );
+  }
 
+  changepage(num:number){
+    if (num == -1){
+      this.page -= 1;
+    }else{
+      this.page += 1;
+    }
   }
 
   getNewsImage(news: News){

frontend/src/app/components/news/showNews.component.ts

@@ -14,6 +14,7 @@ export class ShowNewsComponent{
 
   news!: News;
 
+
   constructor(public newsService: NewsService, public loginService: LoginService, activatedRoute: ActivatedRoute){
 
     const id = activatedRoute.snapshot.params['id'];
@@ -25,6 +26,7 @@ export class ShowNewsComponent{
 
   }
 
+
   isAdmin(){
     return this.loginService.isAdmin();
   }

frontend/src/app/models/news.model.ts

@@ -1,3 +1,17 @@
+export interface NewsPage {
+
+  content: News[];
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  numberOfElements: number;
+  size: number;
+  pageable: any[];
+  sort: boolean [];
+}
+
+
 export interface News {
     id?: number;