NyaGarcia

<div class="container">
  <div class="header">
    <img src="assets/NgPokedex.png" />
  </div>
  <div class="content">
    <div class="list">
      <div class="list-header">
        <h3>List of Pokemon</h3>
        <button mat-raised-button color="primary" (click)="addPokemon()">
          Add Pokemon

NyaGarcia

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

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

@Component({
  selector: 'app-pokemon',
  templateUrl: './pokemon.component.html',

NyaGarcia

import { Component, OnInit } from '@angular/core';
import { Observable, filter, 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

<form [formGroup]="form">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input required formControlName="name" class="form-control" placeholder="Charmander" type="text" matInput />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Type</mat-label>
    <input required formControlName="type" class="form-control" placeholder="Fire" type="text" matInput />
  </mat-form-field>
  <mat-form-field>

NyaGarcia

import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

import { Pokemon } from '../../interfaces/pokemon.interface';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],

NyaGarcia

import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NgModule } from '@angular/core';
import { PokemonComponent } from './pokemon.component';
import { PokemonRoutingModule } from './pokemon-routing.module';
import { ReactiveFormsModule } from '@angular/forms';

NyaGarcia

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

import { Observable } from 'rxjs';
import { Pokemon } from '../../interfaces/pokemon.interface';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
})

NyaGarcia

<div class="card-container">
  <mat-card
    *ngFor="let pokemon of pokemon$ | async"
    (click)="selectPokemon(pokemon)"
  >
    <mat-card-header>
      <mat-card-title>{{ pokemon.name }}</mat-card-title>
      <mat-card-subtitle>{{ pokemon.type }} type</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="pokemon.imgUrl" alt="Photo of a Pokemon" />

NyaGarcia

import {
  CollectionReference,
  DocumentData,
  addDoc,
  collection,
  deleteDoc,
  doc,
  updateDoc,
} from '@firebase/firestore';
import { Firestore, collectionData, docData } from '@angular/fire/firestore';

NyaGarcia

import {
  CollectionReference,
  DocumentData,
  collection,
} from '@firebase/firestore';

import { Firestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';

@Injectable({