feat: delete game button triggers chain of even emmits

web/src/app/components/all-games/all-games.component.html

 <p>All Games</p>
-<app-games [games]=games></app-games>
+<app-games [games]=games (reloadEvent)="handleRefreshEvent()"></app-games>

web/src/app/components/all-games/all-games.component.ts

@@ -22,4 +22,7 @@ export class AllGamesComponent implements OnInit {
       .subscribe(games => this.games = games);
   }
 
+  handleRefreshEvent() {
+    this.getGames();
+  }
 }

web/src/app/components/delete-game-button/delete-game-button.component.html

-<button type="button" class="button delete-button" (click)="onDeleteClick()"></button>
+<button type="button" class="button delete-button" (click)="onDeleteClick()">Delete [{{id}}]</button>

web/src/app/components/delete-game-button/delete-game-button.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GameService } from 'src/app/services/game.service';
 
 @Component({
   selector: 'app-delete-game-button',
@@ -11,12 +12,13 @@ export class DeleteGameButtonComponent implements OnInit {
 
   @Output() onDelete: EventEmitter<number> = new EventEmitter();
 
-  constructor() { }
+  constructor(private gameService: GameService) { }
 
   ngOnInit(): void {
   }
 
   onDeleteClick(): void {
+    this.gameService.deleteGame(this.id);
     this.onDelete.emit(this.id);
   }
 }

web/src/app/components/games/games.component.html

@@ -6,6 +6,7 @@
     <th>{{game.homeTeam.name}}</th>
     <th>{{game.awayTeam.name}}</th>
     <th>{{game.homeTeamScore}}:{{game.awayTeamScore}}</th> 
+    <th><app-delete-game-button [id]=game.id (onDelete)="triggerRefreshEvent()"></app-delete-game-button></th>
   </tr>
 </table>
 

web/src/app/components/games/games.component.ts

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Game } from 'src/app/models/game';
 @Component({
   selector: 'app-games',
@@ -9,8 +9,14 @@ export class GamesComponent implements OnInit {
 
   @Input() games!: Array<Game>;
 
+  @Output() reloadEvent: EventEmitter<any>= new EventEmitter();
+
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  triggerRefreshEvent(): void {
+    this.reloadEvent.emit(null);
+  }
 }

web/src/app/services/game.service.ts

+import { ValueConverter } from '@angular/compiler/src/render3/view/template';
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Game } from '../models/game';
@@ -25,6 +26,6 @@ export class GameService {
   }
 
   deleteGame(id: number) {
-    
+    this.games = this.games.filter((val, i, array) => val.id != id);
   }
 }