refactor: implementa database e service

src/app/app-routing.module.ts

@@ -1,7 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './pages/home/home.component';
+import { CardComponent } from './components/card/card.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path:'',
+    component: HomeComponent
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,3 +1,2 @@
 <app-menu-bar></app-menu-bar>
-<app-home></app-home>
 <router-outlet></router-outlet>

src/app/components/card/card-pricing/card-pricing.component.ts

@@ -8,7 +8,7 @@ import { Component, Input, OnInit } from '@angular/core';
 export class CardPricingComponent implements OnInit {
 
 	@Input()
-	gameType:string ="Digital PS4"
+	gameType:string =""
 	@Input()
 	gamePrice:string = "R$ 399,90"
   constructor() { }

src/app/components/card/card.component.ts

@@ -1,4 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { dataFake } from '../data/dataFake';
+import { GameService } from 'src/app/service/game.service';
 
 @Component({
   selector: 'app-card',
@@ -12,13 +15,25 @@ export class CardComponent implements OnInit {
 	@Input()
 	gameLabel:string=""
 	@Input()
-	gameType:string ="XPTO | PS4"
+	gameType:string =""
 	@Input()
-	gamePrice:string = "R$ 399,90"
+	gamePrice:string = ""
+	@Input()
+	id:string = ""
 
-  constructor() { }
+  constructor(private gameService: GameService) { }
 
   ngOnInit(): void {
+    this.setValuesToComponent(this.id)
   }
 
+  setValuesToComponent(id: string | null){
+		const response = this.gameService.getGameById(id)
+		if (!response) return
+
+		this.gameCover = response.gameCover
+		this.gameLabel = response.gameLabel
+		this.gameType = response.gameType
+		this.gamePrice = response.gamePrice
+  }
 }

src/app/components/data/dataFake.ts

@@ -0,0 +1,44 @@
+export const dataFake = [
+  {
+    "id":"1",
+    "gameCover": "assets/ac-cover.jpg",
+    "gameLabel": "Jogo novo assassin's creed",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"2",
+    "gameCover": "assets/bt-1.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"3",
+    "gameCover": "assets/bt-4.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"4",
+    "gameCover": "assets/bt-5.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"5",
+    "gameCover": "assets/bt-bad-company-2.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+  {
+    "id":"6",
+    "gameCover": "assets/bt-hardline.jpg",
+    "gameLabel": "Jogo do battlefield",
+    "gameType": "PS5",
+    "gamePrice":"R$ 369,99"
+  },
+]

src/app/pages/home/home.component.html

@@ -1,31 +1,8 @@
 <div class="home__container">
-	<app-card
-		gameCover="assets/bt-1.jpg"
-		gameLabel="DIGITAL"
-		gameType="DIGITAL | PS4"
-		gamePrice="R$ 129,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-4.jpg"
-		gameLabel="EXCLUSIVE"
-		gameType="DISC | PS5"
-		gamePrice="R$ 269,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/ac-cover.jpg"
-		gameLabel="BEST OF YEAR"
-		gameType="DIGITAL | PS5"
-		gamePrice="R$ 369,99"
-		>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-hardline.jpg"
-		gameLabel="NEW"
-		gameType="DIGITAL | PS3 PS4 PS5"
-		gamePrice="R$ 369,99"
-	>
-	</app-card>
+	<li *ngFor="let game of dataGame">
+		<app-card
+		id={{game.id}}
+		></app-card>
+	</li>
 </div>
 

src/app/pages/home/home.component.ts

@@ -1,12 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import { dataFake } from 'src/app/components/data/dataFake';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-
+  dataGame = dataFake;
+
   constructor() { }
 
   ngOnInit(): void {

src/app/service/game.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { dataFake } from '../components/data/dataFake';
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class GameService {
+
+  constructor() { }
+
+  getGameById(id: string | null) {
+    return dataFake.find(({ id: idGame }) => idGame === id);
+  }
+}