Utilizing Angular Services Across Parent and Child Components with Multiple Instances

I am facing an issue with my Parent Component where two identical Child components are being called. Each child component consists of a SearchForm and Grid.

Both search grids are displayed side by side in iframe format, allowing users to conduct two separate searches simultaneously.

The problem arises when performing a grid search as both components seem to be using the same service, resulting in data population in both grids. This essentially clones the searches.

What can I do to ensure that each child component utilizes a different service instance? The child components are invoked within HTML selectors as shown below:

<div>
   <app-product-search-grid></app-product-search-grid>

   <app-product-search-grid></app-product-search-grid>
</div>

I am unsure how to implement the solution mentioned in this Stack Overflow answer.

The child component is structured as follows:

export class ProductSearchGridComponent

  constructor(
    private productGridService: ProductGridService,

If possible, I would like to avoid modifying the constructor as it may impact others' code.

angulartypescriptangular-servicesangular10

Answer №1

When it is necessary to have distinct versions of the service in each child component, you can offer your service at the component level:

@Component({
/* . . . */
  providers: [ProductGridService]
})
export class ProductSearchGridComponent {
  constructor(private service: ProductGridService) { }
 }

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

What is the reason behind webpack attempting to interpret my readme.md files?

When using Webpack, I encountered the errors below. Despite the build appearing to be successful, I am still puzzled as to why these errors are occurring. WARNING in ./{snip}/readme.md Module parse failed: C:{snip}\readme.md Unexpected token (1:7) Y ...

javascripttypescriptwebpack

Retrieve contextual information within standard providers

I'm currently using nestjs to create a straightforward HTTP rest API, utilizing typeorm. I have set up 2 Postgres databases and would like the ability to access both, although not necessarily simultaneously. Essentially, I am looking to designate whi ...

typescriptnestjsnestjs-typeorm

Encountering an error of "undefined" when attempting to access loop variables within the ngOnInit() lifecycle hook

When I call the ngOnInit() function, data is fetched from a service and stored for use in my component. However, I am encountering issues with accessing this data outside of the subscribe method. I am unsure of what the problem might be. import { Componen ...

angulartypescript

study the outcome of a Promise with a return type of string

Is there a solution for returning a string from a service that searches in Firebase? Currently, the return in my component shows as "undefined" even though inside the ".subscribe" in the service it's a valid string return. Any ideas on how to resolve ...

node.jsangulartypescriptfirebase

Create a custom hook that encapsulates the useQuery function from tRPC and provides accurate TypeScript typings

I have integrated tRPC into a project that already has API calls, and I am looking to create a separate wrapper for the useQuery function. However, I am facing challenges in getting the TypeScript types right for this customization. My Objective This is w ...

javascriptreactjstypescriptnext.jstrpc.io

Start Transloco in Angular before the application begins

For our Angular project, we have implemented Transloco to handle translations. Within my typescript code, I am using the transloco service in this manner: this.translocoService.translate('foo.bar') I understand that it is crucial to ensure that ...

angulartypescriptinternationalizationtransloco

Having trouble with error popups in Typescript 3.7.2, React, and Material UI 4.5.1 Snackbars due to styling errors

Utilizing the material UI snackbar for displaying error pop-ups in my react application has been quite a challenge. Incorporating a container view where certain actions trigger errors, I aimed to implement my custom snackbar component when an error arises ...

reactjstypescriptmaterial-uisnackbar

What sets 'babel-plugin-module-resolver' apart from 'tsconfig-paths'?

After coming across a SSR demo (React+typescript+Next.js) that utilizes two plugins, I found myself wondering why exactly it needs both of them. In my opinion, these two plugins seem to serve the same purpose. Can anyone provide insight as to why this is? ...

javascriptreactjstypescriptbabeljsnext.js

What is the best way to maintain a search input history while navigating search results and returning using the browser button, similar to Google Search in Angular2?

When I enter a keyword into a search input, press enter, and see the search results, I can then click on a result to navigate to its info. But how can I retrieve the originally searched keyword if I use the back button in my browser? ...

javascriptjqueryangular

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

javascripttypescript

401 Unauthorized response returned upon making a POST request in Angular due to token invalidation

Looking for assistance on understanding and implementing the process of adding a product to the cart upon button click. I have a list of products retrieved from an API, each with options to increment quantity using + and - buttons. When the + button is cli ...

javascriptangulartypescriptionic-framework

CSS Styles not being applied globally in Angular

I've been struggling to properly set the Bootstrap downloaded css styles for my Angular project, despite following some instructions provided here: The styles were downloaded from: https://i.sstatic.net/g0kGH.png Initially, I was expecting it to re ...

angularbootstrap-4

Is there a way to sift through an array in typescript or react native based on a specific key

I have been working with JSON data structures and I am looking to filter it in order to create separate arrays based on specific keys. Current JSON Data: data: { message: 'Customer Transaction', errorCode: null, data: [ ...

typescriptlodash

The error message in the lang.js file on line 21 says: "There is a Syntax

https://i.sstatic.net/mLrvW.png Here's my package.json file: "ng2-file-upload": "1.0.3", "ng2-translate": "2.5.0", "angular2-cookie": "1.2.3", "angular2-google-maps": "0.15.0", "key-codes": "0.0.1", "rxjs": "5.0.0-beta.12" "@angular/common": "2.0.0" ...

javascriptangularfacadelang

Error: Unable to assign void to parameter type

Encountering TypeScript Error: Argument type (response: Response<DSBMannschaftDTO[]>) => void is not assignable to parameter type ((value:Response<DSBMannschaftDTO[]>) => (PromiseLike<void> | void)) null | undefined | undefined ...

typescript

Join a subscription and remain subscribed in sequential order

Within the code below, there is a nested subscribe function. It takes a schedule_id and retrieves questions based on that schedule_id. The functionality works correctly, but the order in which getQuestion() is executed is not guaranteed. Schedule IDs: 111, ...

angulartypescriptrxjs

Tips for leveraging Typescript in .vue files utilizing VS Code?

I have set up my development environment using Visual Studio Code, Vue 2 (webpack template), and Typescript. Below is the code snippet for my App.vue component: <template> <div id="app"> <navbar></navbar> [cont ...

typescriptvue.jsvisual-studio-codevuejs2

Pass a photo along with additional characteristics to the post endpoint in the API

Using the code snippet below, I am able to send an image to a post method and save it as a BLOB in the database successfully: Angular Code: public postUploadedFile(file:any){ this.formData = new FormData(); this.formData.append('file',fi ...

c#angularapiweb-servicesimage-uploading

The function of TypeScript map is not working properly

Encountering the error message "data.map is not a function" while trying to map data from a REST API request returning JSON data. It appears that the issue may stem from the data structure, as it seems like the returned data should be accessed with data.da ...

angulartypescriptapirxjs

What is the best way to use an HTML dropdown menu to select a field with an object as its data type

Objective: Establish a booking instance using the Angular frontend Approach: I am configuring the booking field "category" with an HTML option input through TypeScript. The field is of object data type, consisting of two fields - id and name. Issue: Whil ...

htmlangulartypescriptoop