Implemented recursive videogame-card loading

Author: ultramani

frontend/src/app/components/videogame/videogame-card.component.html

@@ -1,4 +1,4 @@
-<div  class="col-lg-4 mb-5">
+
     <div class="card h-100 shadow border-0">
 
 
@@ -23,5 +23,5 @@
             </div>
         </div>
     </div>
-</div>
+
 <ng-template #elseBlock><p>Content to render when condition is false</p></ng-template>

frontend/src/app/components/videogame/videogame-card.component.ts

@@ -10,22 +10,14 @@ import { VideogameService } from 'src/app/services/videogame.service';
 
 export class VideogameCardComponent{
 
-  @Input() id!:number;
-
-  videogame!: Videogame;
+  @Input()videogame!: Videogame;
 
   constructor(private router: Router, public videogameService: VideogameService){
-    
 
   }
-  
-    ngOnInit() {
-      this.videogameService.getVideogame(this.id).subscribe(
-        videogame => this.videogame = videogame as Videogame,
-        error => console.error(error)
-        
-    )
-    }
+
+    ngOnInit() {}
+
     gotoVideogame() {
         this.router.navigate(['/videogame/'+this.videogame.id]);
     }

frontend/src/app/components/videogame/videogame-catalog.component.html

@@ -1,10 +1,9 @@
 
-
 <section class="py-5">
     <div class="container px-5">
         <h2 class="fw-bolder fs-5 mb-4">Videojuegos</h2>
-        <div id="moreImages" class="row gx-5">
-            <videogame-card  [id]='selectid'></videogame-card>
+        <div *ngIf="ready"   id="moreImages" class="row gx-5">    
+            <videogame-card class="col-lg-4 mb-5" *ngFor="let videogame of videogames;let i = index" [videogame]="videogame"></videogame-card>
         </div>
         <div class="text-end mb-5 mb-xl-0">
             <a class="text-decoration-none" href="#!">

frontend/src/app/components/videogame/videogame-catalog.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { Videogame } from 'src/app/models/videogame.model';
 import { VideogameService } from 'src/app/services/videogame.service';
 
 @Component({
@@ -9,12 +10,20 @@ import { VideogameService } from 'src/app/services/videogame.service';
 
 export class VideogameCatalogComponent{
 
-  selectid:number = 29;
-  
+  ids!:number[];
+  videogames!:Videogame[];
+  ready:boolean = false;
   constructor(private router: Router, activatedRoute: ActivatedRoute, public videogameService: VideogameService){
 
   }
 
+  ngOnInit(){
+    this.videogameService.getVideogames().subscribe(      
+      videogames => this.videogames = videogames as Videogame[],
+      error => console.error(error)
+    )
+    this.ready = true;
+  }
 
 
 

frontend/src/app/services/videogame.service.ts

@@ -13,8 +13,8 @@ export class VideogameService {
 
     constructor(private httpClient: HttpClient) {}
 
-    getVideogames(): Observable<Videogame> {
-        return this.httpClient.get(URL).pipe() as Observable<Videogame>
+    getVideogames(): Observable<Videogame[]> {
+        return this.httpClient.get(URL).pipe() as Observable<Videogame[]>
     }
 
     findVideogamePage() {