@ceski23/stan-js-angular

stan-js Angular adapter

This library provides an Angular adapter for stan-js, enabling integration with Angular applications.

Features

Adapter allows to use of all features from stan-js Features

Installation

Install package using preferred package manager:

npm install stan-js
# or
yarn add stan-js
# or
bun add stan-js

Getting Started

Create a store with initial state:

You can think of a store as your app state. You can define multiple keys/values, each key will be available to use as signal. By adding a getter to the state object, you can have a computed state that manipulates values from the state. Remember to import createStore function from @ceski23/stan-js-angular

import { createStore } from '@ceski23/stan-js-angular'

export const appStore = createStore({
	counter: 0,
	textField: 'Hello World!',
	currentTime: new Date(),
	get upperCaseTextField() {
		return this.textField.toUpperCase()
	},
})

To use store in your app firstly you need to provide it:

import { appStore } from './store'

@Component({
	// ...
	providers: [
		appStore.provideStore(),
	],
	// ...
})

and then you can inject store or state:

store = appStore.injectStore()
state = appStore.injectStoreState()

To read state value simply call each signal:

this.state.counter()

To update state field value use signal method's like set() or update():

this.state.counter.update(counter => counter + 1)
this.state.counter.set(0)

You can also reset state field to initial value by calling reset() function on store object providing state field name as argument:

this.store.reset('counter')

You can find full usage example in this section.

Example