Valdres

provideValdresScope

Signature
provideValdresScope(options?: ValdresScopeOptions): Provider[]

valdres-angular Create an isolated child store for an Angular component

Creates a scoped store that inherits state from the parent but can override values independently. All child components that inject Valdres will use the scoped store.

Usage

import { Component } from "@angular/core"
import { provideValdresScope } from "valdres-angular"

@Component({
    providers: [provideValdresScope({ scopeId: "modal" })],
    template: `<app-modal-content />`,
})
export class ModalComponent {}

Options

OptionTypeDescription
scopeIdstringOptional identifier. Auto-generated if omitted.
initialize(txn) => void | [Atom, value][]Optional callback to set initial values.

Initializing state

import { Component } from "@angular/core"
import { provideValdresScope, injectValue } from "valdres-angular"
import { nameAtom, emailAtom } from "./store"

@Component({
    providers: [
        provideValdresScope({
            scopeId: "edit-form",
            initialize: txn => {
                txn.set(nameAtom, "Draft")
                txn.set(emailAtom, "")
            },
        }),
    ],
    template: `<app-edit-form />`,
})
export class EditFormHost {}

Cleanup

The scope is automatically cleaned up when the component is destroyed.

See also