Valdres

Quick Start with Angular

Install

npm install valdres valdres-angular

Create your first atom

// store.ts
import { atom } from "valdres"

export const countAtom = atom(0)

Use it in a component

import { Component } from "@angular/core"
import { injectAtom } from "valdres-angular"
import { countAtom } from "./store"

@Component({
    template: `
        <div>
            <p>Count: {{ count() }}</p>
            <button (click)="count.update(c => c + 1)">Increment</button>
        </div>
    `,
})
export class CounterComponent {
    count = injectAtom(countAtom)
}

Provide a store

Use provideValdres in your app config:

import { provideValdres } from "valdres-angular"

export const appConfig = {
    providers: [provideValdres()],
}

Read-only values

Use injectValue when you only need to read:

import { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { countAtom } from "./store"

@Component({
    template: `<p>The count is {{ count() }}</p>`,
})
export class DisplayComponent {
    count = injectValue(countAtom)
}

Next steps