function createStoreContext<TValue>(): object;
function createStoreContext<TValue>(): object;
Defined in: packages/angular-store/src/createStoreContext.ts:48
Creates a typed Angular dependency-injection context for sharing a bundle of atoms and stores with a component subtree.
The returned provideStoreContext function accepts a factory that creates the context value. Using a factory (rather than a static value) ensures each component instance — and each SSR request — receives its own state, avoiding cross-request pollution.
Consumers call injectStoreContext() inside an injection context (typically a constructor or field initializer) to retrieve the contextual atoms and stores, then compose them with existing hooks like injectSelector, injectSelector, and injectAtom.
TValue extends object
object
injectStoreContext: () => TValue;
injectStoreContext: () => TValue;
TValue
provideStoreContext: (factory) => Provider;
provideStoreContext: (factory) => Provider;
() => TValue
Provider
const { provideStoreContext, injectStoreContext } = createStoreContext<{
countAtom: Atom<number>
totalsStore: Store<{ count: number }>
}>()
// Parent component provides the context
@Component({
providers: [
provideStoreContext(() => ({
countAtom: createAtom(0),
totalsStore: new Store({ count: 0 }),
})),
],
template: `<child-cmp />`,
})
class ParentComponent {}
// Child component consumes the context
@Component({ template: `{{ count() }}` })
class ChildComponent {
private ctx = injectStoreContext()
count = injectSelector(this.ctx.countAtom)
}
const { provideStoreContext, injectStoreContext } = createStoreContext<{
countAtom: Atom<number>
totalsStore: Store<{ count: number }>
}>()
// Parent component provides the context
@Component({
providers: [
provideStoreContext(() => ({
countAtom: createAtom(0),
totalsStore: new Store({ count: 0 }),
})),
],
template: `<child-cmp />`,
})
class ParentComponent {}
// Child component consumes the context
@Component({ template: `{{ count() }}` })
class ChildComponent {
private ctx = injectStoreContext()
count = injectSelector(this.ctx.countAtom)
}
When injectStoreContext() is called without a matching provideStoreContext() in a parent component's providers.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.