NyaGarcia

<div class="card-container">
  <ngbytes-pokemon-card
    *ngFor="let pokemon of pokemonList"
    [pokemon]="pokemon"
    (click)="openDetailsPage(pokemon.id)"
  ></ngbytes-pokemon-card>
</div>

NyaGarcia

import { Component, OnInit } from '@angular/core';
import { Pokemon, PokemonService } from '../pokemon.service';

import { CommonModule } from '@angular/common';
import { PokemonCardComponent } from '../pokemon-card/pokemon-card.component';
import { Router } from '@angular/router';

@Component({
  selector: 'ngbytes-pokemon-list',
  standalone: true,

NyaGarcia

import { Component, Input } from '@angular/core';

import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { Pokemon } from '../pokemon.service';

@Component({
  selector: 'ngbytes-pokemon-card',
  standalone: true,
  imports: [CommonModule, MatCardModule],

NyaGarcia

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ pokemon.name }}</mat-card-title>
    <mat-card-subtitle>{{ pokemon.type }}</mat-card-subtitle>
  </mat-card-header>
  <img
    mat-card-image
    [src]="pokemon.imageUrl"
    [alt]="'Photo of a ' + pokemon.name"
  />

NyaGarcia

import { Injectable } from '@angular/core';

export interface Pokemon {
  id: string;
  name: string;
  type: string;
  imageUrl: string;
  description: string;
  defense: number;
  attack: number;

NyaGarcia

function attackPokemon(enemyType: string) {
  if (!enemyType) {
    throw new Error('You need to provide an enemy type');
  }

  if (enemyType === 'fire') {
    return useWaterAttack();
  }

  if (enemyType === 'grass') {

NyaGarcia

function attackPokemon(enemyType: string) {
  if (enemyType) {
    if (enemyType === 'fire') {
      useWaterAttack();
    } else if (enemyType === 'grass') {
      useFireAttack();
    } else {
      useGrassAttack();
    }
  } else {

NyaGarcia

    dialogRef
      .afterClosed()
      .pipe(
        filter(Boolean),
        tap((pokemon) => this.pokedexService.create(pokemon)),
        takeUntil(this.destroyed$) // Will force the Observable to complete when destroyed$ emits a value
      )
      .subscribe();

NyaGarcia

import { Component, OnInit } from '@angular/core';
import { Observable, Subject, filter, takeUntil, tap } from 'rxjs';

import { FormComponent } from './components/form/form.component';
import { MatDialog } from '@angular/material/dialog';
import { PokedexFirestoreService } from 'src/app/core/pokedex-firestore.service';
import { Pokemon } from './interfaces/pokemon.interface';

@Component({
  selector: 'app-pokemon',

NyaGarcia

ngOnDestroy() {
  this.destroyed$.next();
}