Fin section 16 : RxJS

src/app/pokemon/detail-pokemon/detail-pokemon.component.html

@@ -55,4 +55,6 @@
     </div>
   </div>
 </div>
-<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>
+<h4 *ngIf="!pokemon" class="center">
+  <app-loader></app-loader>
+</h4>

src/app/pokemon/list-pokemon/list-pokemon.component.html

@@ -1,5 +1,6 @@
 <div class="container">
   <div class="row">
+    <app-search-pokemon></app-search-pokemon>
     <div
       *ngFor="let pokemon of pokemonList"
       class="col m4 s6"

src/app/pokemon/loader/loader.component.html

@@ -0,0 +1,13 @@
+<div class="preloader-wrapper big active">
+  <div class="spinner-layer spinner-blue">
+    <div class="circle-clipper left">
+      <div class="circle"></div>
+    </div>
+    <div class="gap-patch">
+      <div class="circle"></div>
+    </div>
+    <div class="circle-clipper right">
+      <div class="circle"></div>
+    </div>
+  </div>
+</div>

src/app/pokemon/loader/loader.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styles: [],
+})
+export class LoaderComponent {}

src/app/pokemon/pokemon-form/pokemon-form.component.html

@@ -125,4 +125,6 @@
     </div>
   </div>
 </form>
-<h3 *ngIf="!pokemon" class="center">Aucun pokémon à éditer...</h3>
+<h3 *ngIf="!pokemon" class="center">
+  <app-loader></app-loader>
+</h3>

src/app/pokemon/pokemon.module.ts

@@ -11,6 +11,8 @@ import { FormsModule } from '@angular/forms';
 import { PokemonFormComponent } from './pokemon-form/pokemon-form.component';
 import { EditPokemonComponent } from './edit-pokemon/edit-pokemon.component';
 import { AddPokemonComponent } from './add-pokemon/add-pokemon.component';
+import { SearchPokemonComponent } from './search-pokemon/search-pokemon.component';
+import { LoaderComponent } from './loader/loader.component';
 
 const pokemonRoutes: Routes = [
   { path: 'edit/pokemon/:id', component: EditPokemonComponent },
@@ -28,6 +30,8 @@ const pokemonRoutes: Routes = [
     PokemonFormComponent,
     EditPokemonComponent,
     AddPokemonComponent,
+    SearchPokemonComponent,
+    LoaderComponent,
   ],
   imports: [CommonModule, FormsModule, RouterModule.forChild(pokemonRoutes)],
   providers: [PokemonService],

src/app/pokemon/pokemon.service.ts

@@ -35,6 +35,16 @@ export class PokemonService {
     );
   }
 
+  searchPokemonList(term: string): Observable<Pokemon[]> {
+    if (term.length <= 1) {
+      return of([]);
+    }
+    return this.http.get<Pokemon[]>(`api/pokemons?name=${term}`).pipe(
+      tap((pokemon) => this.log(pokemon)),
+      catchError((error) => this.handleError(error, []))
+    );
+  }
+
   updatePokemon(pokemon: Pokemon): Observable<null> {
     const httpOptions = {
       headers: new HttpHeaders({ 'Content-Type': 'application/json' }),

src/app/pokemon/search-pokemon/search-pokemon.component.html

@@ -0,0 +1,25 @@
+<div class="row">
+  <div class="col s12 m6 offset-m3">
+    <div class="card">
+      <div class="card-content">
+        <div class="input-field">
+          <input
+            #searchBox
+            type="text"
+            (keyup)="search(searchBox.value)"
+            placeholder="Rechercher un Pokémon"
+          />
+          <div class="collection">
+            <a
+              *ngFor="let pokemon of pokemons$ | async"
+              (click)="goToDetail(pokemon)"
+              class="collection-item"
+            >
+              {{ pokemon.name }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pokemon/search-pokemon/search-pokemon.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  Observable,
+  Subject,
+  switchMap,
+} from 'rxjs';
+import { Pokemon } from '../pokemon';
+import { PokemonService } from '../pokemon.service';
+
+@Component({
+  selector: 'app-search-pokemon',
+  templateUrl: './search-pokemon.component.html',
+  styles: [],
+})
+export class SearchPokemonComponent implements OnInit {
+  searchTerms = new Subject<string>();
+  pokemons$: Observable<Pokemon[]>;
+
+  constructor(private router: Router, private pokemonService: PokemonService) {}
+
+  ngOnInit(): void {
+    this.pokemons$ = this.searchTerms.pipe(
+      debounceTime(300),
+      distinctUntilChanged(),
+      switchMap((term) => this.pokemonService.searchPokemonList(term))
+    );
+  }
+
+  search(term: string) {
+    this.searchTerms.next(term);
+  }
+
+  goToDetail(pokemon: Pokemon) {
+    const link = ['/pokemon', pokemon.id];
+    this.router.navigate(link);
+  }
+}