41 lines
995 B
TypeScript
41 lines
995 B
TypeScript
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);
|
|
}
|
|
}
|