What is the process for passing a URL from a component and assigning it as the new service URL?

Hello, I am new to Angular and I am trying to pass a URL from a component and set it as the new service URL. Here is my code:

pokemon.service.ts

  private _url: string = "https://pokeapi.co/api/v2/pokemon";

  constructor(private http : HttpClient) { }

  setUrl(value: string){
    this._url = value;
  }

  getUrl(): Observable<IPokemon[]>{
    return this.http.get<IPokemon>(this._url);
  }

pokemon-search.component.ts

export class PokemonSearchComponent implements OnInit {
  pokemons: any = [];
  pokemonUrl: string;

  constructor(private _pokemons : PokemonsService ) { }

  ngOnInit(){
    this._pokemons.getUrl().subscribe(data => {
      this.pokemons = data;
    });
  }

  previousPokemon(url){
    this._pokemons.setUrl(url);
  }
}

I am passing the URL back to the service but it doesn't change the output of the default URL. Can someone please help? Thank you!.

Answer №1

To receive the most current information, make sure to adjust the URL before subscribing.

updatePokemonList(url){
    this._pokemonData.setUrl(url);
    this._pokemonData.getUrl().subscribe(data => {
      this.pokemonList = data;
    });
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with defining content and background scripts while using AngularJS2 CLI to build a Chrome extension

After creating a brand new AngularJS-2 application using the cli tool from github, I discovered that running ng build compiles my sources into a /dist folder. As I am developing a chrome extension, I need to specify the location of my content script (whi ...

Is there a way to link the data from datepicker JS to Angular?

I am attempting to integrate the two files below into my Angular project: <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js'></script> <script src='https://cdnjs.clou ...

How to Create a Flexible Angular Array Input Component

I have been working on developing reusable form input components using Angular's reactive forms. However, I am currently encountering challenges with my FormArray input component. To overcome some issues, I had to resort to using double-type casting ...

Angular2 doesn't support importing Typescript Definitions

I've been attempting to incorporate a TypeScript definition file from DefinitelyTyped, specifically the FHIR definitions. However, I'm encountering difficulties referencing or importing it into my desired files. Whenever I try to reference "fhir, ...

Variable type assignment failed due to an error

I'm feeling a bit unsure about whether my query pertains to WebStorm, Angular2, or Typescript. Currently, I have an Angular2 build set up and I am using WebStorm 2016.1.2 for editing purposes. In one of my components, I obtain a reference to a DOM el ...

What is the best way to define the type of an object when the Key is already known?

If I have the code snippet below, how can I properly define the data object type based on the known value of data.type? In this scenario, I aim to assign a specific type to data when its type property is either "sms" or "email" const payload = '{&quo ...

Prevent time slots from being selected based on the current hour using JavaScript

I need to create a function that will disable previous timeslots based on the current hour. For example, if it is 1PM, I want all timeslots before 1PM to be disabled. Here is the HTML code: <div class=" col-sm-4 col-md-4 col-lg-4"> <md ...

Setting up Emotion js in a React TypeScript project using Vite 4

Currently, I am in the process of transitioning from Webpack to Vite for my React Typescript application. I have been attempting to integrate Emotion js into the project. "@vitejs/plugin-react": "^4.0.1", "vite": "^4.3.9 ...

Creating React Context Providers with Value props using Typescript

I'd prefer to sidestep the challenge of nesting numerous providers around my app component, leading to a hierarchy of provider components that resembles a sideways mountain. I aim to utilize composition for combining those providers. Typically, my pro ...

Combining class and data within an iteration while utilizing ngFor

I have a dynamic table with rows generated using ngFor <tbody> <tr *ngFor="let item of Details"> <div class="row details-row row-cols-lg-2 row-cols-1" *ngIf="closureDetails"> <div ...

What is the best way to explain a function that alters an object directly through reference?

I have a function that changes an object's properties directly: function addProperty(object, newValue) { object.bar = newValue; } Is there a way in TypeScript to indicate that the type of object is modified after calling the addProperty function? ...

TypeScript focuses on checking the type of variables rather than their instance

Is there a way to pass a type (not an instance) as a parameter, with the condition that the type must be an extension of a specific base type? For example abstract class Shape { } class Circle extends Shape { } class Rectangle extends Shape { } class ...

Leave out Angular Cypress E2E test best practices when applying Axe

Currently, I am involved in a Angular project that utilizes Cypress E2E Tests for testing purposes. Within these tests, we are using cypress-axe to conduct an accessibility check. In the past, we have been utilizing the Axe DevTools (Chrome Browser Extens ...

The Lenis smooth scrolling feature (GSAP) is not functioning properly

I have encountered an issue with the smooth scrolling feature of gsap causing a delay on my website. This problem is only resolved when I manually go into the browser settings and disable smooth scrolling by navigating to chrome://flags/#smooth-scrolling ...

What is the process for transforming tsconfig.json into a configuration object using the TypeScript API?

Does a TypeScript API exist for parsing tsconfig.json and jsconfig.json files into complete TypeScript configuration objects, with all properties filled in either from the file itself or default values? import ts from "typescript"; const tsconfi ...

Why is my Angular2 reactive form not submitting on button click? (Manually calling form.submit() using getElementById workaround)

When I click on <input type='submit' />, the form is submitted with a POST request and redirects me to mockURL, which is exactly what I want. In xForm.html: <form id="xForm" [formGroup]="xFormGroup" met ...

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Is there a way to check a condition before subscribing within the operator chain? Here's what I have: // parentElem:boolean = false; // the parent elem show/hide; let parentElem = false; // inside the ngAfterViewInit(); this.myForm.get('grandPa ...

NgOnChanges replaces form control value when user inputs text

In my autocomplete form control component: @Component({ selector: 'app-autocomplete', templateUrl: './app-autocomplete.view.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class AutoCompleteFilterComponent ...

Jest is having trouble locating the module that ends with ".svg?react" when using Vite in combination with React, TypeScript, and Jest

Currently, I am facing an issue while testing my app built using vite + react + ts. Jest is highlighting an error stating that it cannot locate the "svg?react" module when trying to create my dashboard component. The problem arises with Jest as soon as th ...

Ensure that the input focus is consistently set within the ng-template

When I click on a button in my app, an input element becomes visible. Then, when I click on another button, it gets hidden again. I achieved this functionality using a simple ng-template. However, I encountered a problem - I want the input to automatically ...