chore(app): remove @ngrx/component library

Author: Ismaestro

package-lock.json

@@ -51,7 +51,6 @@
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
     "@eslint/js": "9.38.0",
-    "@ngrx/component": "20.1.0",
     "@playwright/test": "1.56.1",
     "@types/node": "24.9.2",
     "@typescript-eslint/eslint-plugin": "8.46.2",
@@ -88,7 +87,7 @@
     "wait-on": "9.0.1"
   },
   "engines": {
-    "node": ">=20.0.0 <24",
+    "node": ">=22.0.0 <24",
     "npm": ">=9.0.0"
   },
   "private": true

package.json

@@ -1,52 +1,48 @@
 <main>
   <h1 class="first-heading__title" i18n>My Pokemon</h1>
-  <ng-container *ngrxLet="userPokemons$ as userPokemons; suspenseTpl: loading">
+
+  @if (userPokemons().length >= 0) {
     <div class="my-pokemon__search-container">
       <app-pokemon-search-input
-        [title]="userPokemons?.length ? translations.findMore : translations.findPokemon"
+        [title]="userPokemons().length ? translations.findMore : translations.findPokemon"
       />
     </div>
+  }
 
-    @if (!userPokemons?.length) {
-      <div class="pokemons-empty__container">
-        <div>
-          <p i18n>
-            Uh-oh, it looks like you haven’t caught any Pokémon yet! Need help finding a pokemon?
-            Try using the search bar to track them down. Gotta catch ‘em all!
-          </p>
-        </div>
-        <div>
-          <img
-            class="pokemons-empty__image"
-            alt="ash jumping with a pokeball"
-            i18n-alt
-            ngSrc="angularexampleapp/assets/images/ash-jumping.png"
-            width="675"
-            height="1280"
-          />
-        </div>
+  @if (!userPokemons().length) {
+    <div class="pokemons-empty__container">
+      <div>
+        <p i18n>
+          Uh-oh, it looks like you haven’t caught any Pokémon yet! Need help finding a pokemon? Try
+          using the search bar to track them down. Gotta catch ‘em all!
+        </p>
+      </div>
+      <div>
+        <img
+          class="pokemons-empty__image"
+          alt="ash jumping with a pokeball"
+          i18n-alt
+          ngSrc="angularexampleapp/assets/images/ash-jumping.png"
+          width="675"
+          height="1280"
+        />
       </div>
-    } @else {
-      <ul class="my-pokemon__grid">
-        @for (pokemon of userPokemons$ | ngrxPush; track pokemon.id) {
-          <li>
-            <app-pokemon-card [pokemon]="pokemon" />
-          </li>
-        }
-      </ul>
-    }
-  </ng-container>
-  <ng-template #loading>
+    </div>
+  } @else {
+    <ul class="my-pokemon__grid">
+      @for (pokemon of userPokemons(); track pokemon.id) {
+        <li>
+          <app-pokemon-card [pokemon]="pokemon" />
+        </li>
+      }
+    </ul>
+  }
+
+  @if (loading()) {
     <ul class="my-pokemon__grid">
-      <li>
-        <app-pokemon-card [loading]="true" />
-      </li>
-      <li>
-        <app-pokemon-card [loading]="true" />
-      </li>
-      <li>
-        <app-pokemon-card [loading]="true" />
-      </li>
+      <li><app-pokemon-card [loading]="true" /></li>
+      <li><app-pokemon-card [loading]="true" /></li>
+      <li><app-pokemon-card [loading]="true" /></li>
     </ul>
-  </ng-template>
+  }
 </main>

src/app/features/user/my-pokemon/pages/my-pokemon/my-pokemon.component.html

@@ -1,23 +1,23 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  inject,
+  signal,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { UserService } from '~features/authentication/services/user.service';
 import { PokemonService } from '~features/pokemon/services/pokemon.service';
 import { NgOptimizedImage } from '@angular/common';
 import { AlertService } from '~core/services/ui/alert.service';
-import { catchError, of, switchMap } from 'rxjs';
-import { LetDirective, PushPipe } from '@ngrx/component';
+import { catchError, map, of, startWith, switchMap } from 'rxjs';
 import { PokemonCardComponent } from '~features/user/my-pokemon/components/pokemon-card/pokemon-card.component';
 import { translations } from '~locale/translations';
 import { PokemonSearchInputComponent } from '~shared/components/pokemon-search-input/pokemon-search-input.component';
 
 @Component({
   selector: 'app-my-pokemon',
-  imports: [
-    PokemonCardComponent,
-    NgOptimizedImage,
-    PushPipe,
-    LetDirective,
-    PokemonSearchInputComponent,
-  ],
+  imports: [PokemonCardComponent, NgOptimizedImage, PokemonSearchInputComponent],
   templateUrl: './my-pokemon.component.html',
   styleUrl: './my-pokemon.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,16 +29,26 @@ export class MyPokemonComponent {
   private readonly alertService = inject(AlertService);
 
   readonly translations = translations;
-  readonly userPokemons$ = this.userService.getMe({ cache: false }).pipe(
-    switchMap((user) => {
-      if (user.caughtPokemonIds.length === 0) {
+  readonly loading = signal(true);
+
+  readonly userPokemons = toSignal(
+    this.userService.getMe({ cache: false }).pipe(
+      switchMap((user) => {
+        if (user.caughtPokemonIds.length === 0) {
+          return of([]);
+        }
+        return this.pokemonService.getPokemonByIds(user.caughtPokemonIds);
+      }),
+      catchError(() => {
+        this.alertService.createErrorAlert(translations.genericErrorAlert);
         return of([]);
-      }
-      return this.pokemonService.getPokemonByIds(user.caughtPokemonIds);
-    }),
-    catchError(() => {
-      this.alertService.createErrorAlert(translations.genericErrorAlert);
-      return of([]);
-    }),
+      }),
+      startWith([]),
+      map((result) => {
+        this.loading.set(false);
+        return result;
+      }),
+    ),
+    { initialValue: [] },
   );
 }