{"id":21184299,"url":"https://github.com/notnikola1/ngx-simple-state-manager","last_synced_at":"2025-07-10T00:33:19.305Z","repository":{"id":257481922,"uuid":"858469241","full_name":"notnikola1/ngx-simple-state-manager","owner":"notnikola1","description":"Dead simple state manager service for angular.","archived":false,"fork":false,"pushed_at":"2024-09-20T12:12:29.000Z","size":175,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T19:19:02.037Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/notnikola1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-17T00:23:39.000Z","updated_at":"2024-10-15T03:30:29.000Z","dependencies_parsed_at":"2024-09-20T13:01:39.476Z","dependency_job_id":null,"html_url":"https://github.com/notnikola1/ngx-simple-state-manager","commit_stats":null,"previous_names":["notnikola1/ngx-simple-state-manager"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notnikola1%2Fngx-simple-state-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notnikola1%2Fngx-simple-state-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notnikola1%2Fngx-simple-state-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notnikola1%2Fngx-simple-state-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notnikola1","download_url":"https://codeload.github.com/notnikola1/ngx-simple-state-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225606572,"owners_count":17495551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T18:01:16.351Z","updated_at":"2024-11-20T18:02:54.686Z","avatar_url":"https://github.com/notnikola1.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Simple state manager for Angular applications\n\n### Purpose\n\nComponent-bound simple to handle state managment that is accessible application wide with type support and an observer to handle any reactive state changes if and when needed.\n\n## Installation\n\n``npm install --save ngx-simple-state-manager``\n\n## How to use\n\n### Import NgxSsmModule into app.module or into any of your modules.\n```\n\n\n// MyModule.module.ts\n\n[...]\nimports: [\n    [...],\n    NgxSsmModule \u003c-\n]\n[...]\n```\n### Define the shape of the component state object and import the NgxSSM service into your component.\n```\n\n\ninterface IComponentState {\n\tfoo: {\n\t\tbar: string,\n\t\tbaz: string\n\t},\n\tbar: string\n}\n\n@Component({...})\nexport class MyComponent {\n    \n    constructor(\n    private ssm: NgSSM\n    ) {\n        this.ssm.registerComponent\u003cIComponentState\u003e( this, {\n\t\t\tfoo: {\n\t\t\t\tbar:   'hello bar inner!',\n\t\t\t\tbaz:   'hello baz'\n\t\t\t},\n\t\t\tbar: \"hello bar\"\n\t\t})}\n    }\n```\n\n### NOTE ** Since the shape is not always known - IComponentState supports \"any\" type **\n\n### Setting new state\n\n- Partial state updates are supported\n\n```\n@Component({...})\n[...]\nsomeMethod(){\n    this.ssm.setState\u003cComponentState\u003e( this, {\n\t    foo: { bar: \"asd\" }\n    } )\n}\n[...]\n\n```\n\n### Get current component state\n\n```\n@Component({...})\n[...]\nsomeMethod(){\n    this.ssm.getState( this )\n}\n[...]\n```\n\n### Observe state changes\n\n- ALL state changes will be propagated through this (yes that means other component updates too, use this with some care).\n\n```\n[...]\n    this.ssm.stateObserver$.subscribe( value =\u003e {\n\t\t\tconsole.log( value );\n\t\t} )\n[...]\n```\n\n### Observe state changes of a single component\n\n- Create a separate observer for a single component and pass option to disable global state change firing\n\n```\n[...]\nconst initialState = {...}\nconst options = {\n    componentIdentifier: string,\n    globalFiring: boolean\n}\n\nthis.stateService.registerComponent\u003cIComponentStateAuth\u003e( this, initialState,\n\t\t\t{\n\t\t\t\tcomponentIdentifier: 'MyComponent',\n\t\t\t\tglobalFiring:        false \u003c- enable/disable global firing\n\t\t\t} );\n[...]\n```\n\n### Listening to COMPONENT state changes\n\n- Note - due to instantiation/loading timings listening for component specific changes is available after all constructors have passed (assuming  the targeted component has it registration method called in the constructor).\n\nPoint being - you cannot subscribe to component specific changes before the component is instantiated and registered. Natürlich.\n\n- Note 2 - If you want to listen for specific component changes, the component that you are listening to MUST have a name.\n\n-\u003e MyAuthComponent.name = 'MyAuthComponentName'\n\n```\nexport class MyAuthComponent {\n name = 'MyAuthComponentName'\n constructor(\n    private stateService: NgxSSM\n ){\n    this.stateService.register(...)\n }\n [...]\n}\n------------------------------\n[...]\nexport class YayComponent implements AfterViewInit {\n    constructor(\n        private stateService: NgxSSM\n    ){}\n[...]\n    public ngAfterViewInit(): void {\n\t\tconst someCompObs = this.stateService.getComponentObserverByName( \"MyAuthComponentName\" );\n\t\t// ^ this is why the targeted component must have a name \n\t\tsomeCompObs.subscribe( value =\u003e {\n\t\t\tthis.currentUser = value.diff.currentUser; //or whatever else you need.\n\t\t} )\n\t}\n[...]\n}\n```\n\n### Get full APPLICATION state\n\n```\n@Component({...})\n[...]\nsomeMethod(){\n    this.ssm.getAppState()\n}\n[...]\n```\n\n------\n\n## API docs\n\n```\ninterface IComponentOptions {\n\tcomponentIdentifier: string, \u003c- component name\n\tglobalFiring: boolean \u003c- fire ONLY the components state change observer, and NOT the global one\n}\n\n- note - globalFiring = true -\u003e fires BOTH the component AND global observers.\nIf you want to use specific comp observer - recommended value is false\n\ninterface IComponentStateInstance\u003cT\u003e {\n\tid: string,\n\tname: string,\n\tstate: T,\n\tcomp: any\n}\n```\n\n`` Glossary -\u003e T = IComponentState``\n\n`` Glossary -\u003e R = IComponentOptions``\n\n`` registerComponent\u003cT\u003e(this, initialStateObject\u003cT\u003e, options?: IComponentOptions) : void  ``\n\n`` setState\u003cT\u003e(this, newState\u003cPartial\u003cT\u003e\u003e) : void \u003c- as seen above, you can update only a part``\n\n`` getComponentStateByName(name: string): IComponentState``\n\n`` getComponentObserverByName(name: string): Observable\u003cvalue\u003e | \u003c- typed at the end of paragraph ``\n\n`` getComponentBySSM_UUID(id: string): IComponentState ``\n\n`` getState(this) : IComponentState ``\n\n`` getApplicationState() \u003c- entire application state, shape depends on your components ``\n\n```\n stateObserver$ value :\n    {\n    component: instance, \u003c- \"this\"\n    name:      name, \u003c- component name, if any (instance.name)\n    id:        id, \u003c- generated on registration, instance.__ssm_uuid, different for every instance and component\n    oldState:  before,\n    newState:  result,\n    diff:      diff\n    }\n ```\n\n## FAQ\n\n- Q : Are there Actions/Reducers like in redux?\n- A : No. This is a *SIMPLE* state management library - its meant to be actually useful.\n- ---\n- Q : Can I use this along with redux?\n- A : Probably.\n- ---\n- Q : I dont know the exact interface that my state will have!\n- A : Use \"any\" as initialState type and build it from there\n- ---\n- Q : Does this support standalone components?\n- A : Dont know, dont care - I dont think standalone components are a net positive and I do not support them.\n- ---\n- Q : There are other state management libs? Why this?\n- A : I found them to be too heavy handed in their approach and too complex to use for what they are supposed to be used.\n- ---\n- Q : I think that \u003cinsert lib here\\\u003e is better!\n- A : Great! Go, use it, with my blessing, more power to you!\n- ----\n- Q : Will there be something like this for React?\n- A : No.\n- ---\n- Q : Will there be support for component specific state change observers?\n- ~~A : Possibly, at a later date.~~\n- A : Implemented\n- ---\n- Q : How do I know whats my component __ssm_uuid?\n- A : After calling the \"register\" method, that specific component instance will have \"__ssm_uuid\" bound to it, just call \"this.__ssm_uuid\" to get it.\n- ---\n- Q : I want to do a specific thing in my component only when something changes in another specific component, how do i?\n- A : Use __ssm_uuid to filter what you need.\n\n## License\n\nMIT\n\n## Funding\n\nDonate to a cancer research charity or something, I'm good.\n\n## PR's\n\nSure, go wild.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotnikola1%2Fngx-simple-state-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotnikola1%2Fngx-simple-state-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotnikola1%2Fngx-simple-state-manager/lists"}