i did a global component search. And works well, I pass on everything what component need. But I have a problem with the service architecture. All my http search calls are in one global component within the ts.component file.

I have 3 different http calls. Each is a separate module. For example I have a search name, a customer, and employee. In order to import the search component within the Customer component and search for customers, I need to import and employee the name module as well, because everything is inside the global-search component.

global component shared component ->

            <input type="text"
                   (input)="onSearch($event)"
                   #focus
                   [placeholder]="settings.text"
                   class="w-100 h-100 border-0 shadow-none" />

With @Input() I props all data to child component.. and searching depending of prop data. Work good except loading all modules.

my architecture of folder:

shared/components/search-global-component:

inside search-global-component folder I have:

search-global-component.html
search-global-component.ts.
search-global-component.module
search-global-component.scss

inside module:

i export exports: [SearchGlobalComponent],

How to use in different components:

example inside name or customer or employee components I import SearchGlobalComponent.module

                    <global-search 
                     [(ngModel)]="searchedItem"
                     [primaryKey]="nameId" or customerId
                     [text]="'Select service types'"  ></mglobal-search > 

Here is problem inside NAME I need to import CUSTOMER MODULE AND EMPLOYEE MODULE

how to avoid it? Where to register service ? Do you understand my problem??

if i wanted to add a search global component to another component in that component i would have to import all the modules used within the global search component just because i do http service call to get all values for name . customer , employees or new added component