How to provide two different instances of an angular injectable in the same component with the...

I have an angular service as shown below:

@Injectable({ providedIn: 'root' })
export class SelectItemGroupsResourceFacade {
$assetPath = signal<string>('')
$appName = signal<string>('')

#selectItemGroupsResource: ResourceRef<TSelectItemGroup[] | undefined> =
resource<TSelectItemGroup[], TSelectItemGroupsLoaderRequest>({
request: () => ({
appName: this.$appName(),
assetPath: this.$assetPath()
}),
loader: selectItemGroupsLoader()
})

configureResource = (
appName: string,
assetPath: string
): ResourceRef<TSelectItemGroup[] | undefined> => {
this.$appName.set(appName)
this.$assetPath.set(assetPath)

return this.#selectItemGroupsResource
}
}



The issue is that when the two calls below are made, the last one wins.

#resrcFacade = inject(SelectItemGroupsResourceFacade)

$titlesResrc: ResourceRef<TSelectItemGroup[] | undefined> =
this.#resrcFacade.configureResource('registration', 'titles.json')

$suffixResrc: ResourceRef<TSelectItemGroup[] | undefined> =
this.#resrcFacade.configureResource('registration', 'suffixes.json')


What I actually need is two different instances of SelectItemGroupsResourceFacade, instead of a single one. Using the providers decorator would give the same result in the same component

Continue reading...