Hi im new in angular and i want to refresh a component after i add a new set of API url after the click event in the button this is my code. pokemons.service.ts
export class PokemonsService { private _url: string = "https://pokeapi.co/api/v2/pokemon"; private _pokemonUrl: string; constructor(private http : HttpClient) { } setUrl(value: string){ this._url = value; } getUrl(): Observable<IPokemon[]>{ return this.http.get<IPokemon[]>(this._url); } setPokemonUrl(value: string){ this._pokemonUrl = value; } getPokemonsUrl(): Observable<IPokemonDetails[]>{ return this.http.get<IPokemonDetails[]>(this._pokemonUrl); } } pokemon-search.component.ts
export class PokemonSearchComponent implements OnInit { pokemons = []; pokemonUrl: string; constructor(private _pokemons : PokemonsService) { } ngOnInit(){ this._pokemons.getUrl().subscribe(data => { console.log(data); this.pokemons = data; }); } sendPokemonUrlToService(value: string){ this._pokemons.setPokemonUrl(value); } onClick(url){ this._pokemons.setPokemonUrl(url); console.log(this._pokemons); } onClickNextPokemon(url){ this._pokemons.setUrl(url); console.log(this._pokemons); } } pokemon-search.component.html
<ul *ngFor="let pokemon of pokemons.results"> <li><button (click)="onClick(pokemon.url)">{{pokemon.name}}</button></li> </ul> <button (click)="onClickNextPokemon(pokemons.previous)">PREVIOUS</button> <button (click)="onClickNextPokemon(pokemons.next)">NEXT</button> thankyou so much in advance
rxjs-subject. When user search for url that url goes to rxjs-subject and all other consumer of this subject gets results. This way your main data api and search api works separately with single responsibility.