# 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

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

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

## Options

| Option       | Type                               | Description                                     |
| ------------ | ---------------------------------- | ----------------------------------------------- |
| `scopeId`    | `string`                           | Optional identifier. Auto-generated if omitted. |
| `initialize` | `(txn) => void \| [Atom, value][]` | Optional callback to set initial values.        |

## Initializing state

```ts
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

- [Scoped Stores](https://valdres.dev/guides/scoped-stores) — full guide on scoped stores
- [provideValdres](https://valdres.dev/angular/provideValdres) — provide a store to your component tree