{"id":19999053,"url":"https://github.com/tlmader/ng-set-state","last_synced_at":"2026-04-24T22:37:21.503Z","repository":{"id":74862189,"uuid":"151732805","full_name":"tlmader/ng-set-state","owner":"tlmader","description":"Strongly typed function that safely mutates this.state for an Angular component","archived":false,"fork":false,"pushed_at":"2018-10-05T14:32:56.000Z","size":1,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-14T19:35:56.984Z","etag":null,"topics":["angular","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tlmader.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-10-05T14:27:12.000Z","updated_at":"2018-10-05T14:34:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d95dc64-32bc-4774-b36d-6ccdbd8a7dd3","html_url":"https://github.com/tlmader/ng-set-state","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tlmader/ng-set-state","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlmader%2Fng-set-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlmader%2Fng-set-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlmader%2Fng-set-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlmader%2Fng-set-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tlmader","download_url":"https://codeload.github.com/tlmader/ng-set-state/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlmader%2Fng-set-state/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32243683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular","typescript"],"created_at":"2024-11-13T05:10:19.235Z","updated_at":"2026-04-24T22:37:21.477Z","avatar_url":"https://github.com/tlmader.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-set-state\n\nReturns a strongly typed function that safely mutates this.state for the given context.\n\n1. Set up State interface and initial state:\n\n```\nconst initialState = {\n  counter: 0\n};\ntype State = Readonly\u003ctypeof initialState\u003e;\n```\n\n2. Initialize state and setState inside component\n\n```\nexport class StepperComponent {\n  readonly state: State = initialState;\n  readonly setState = createSetState\u003cState\u003e(this);\n}\n```\n\nReturned function (setState) accepts an updater function with the signature:\n\n```\n(previousState) =\u003e nextState\n```\n\nState is a reference to the component state at the time the change is being applied. It should not be directly\nmutated. Instead, changes should be represented by building a new object based on the input from state. For\ninstance, suppose we wanted to increment a value in state by 1:\n\n```\nhandleStep(): void {\n  this.setState((previousState) =\u003e ({\n    counter: previousState.counter + 1\n  }));\n}\n```\n\nState received by the updater function is the previous state. The next state will be the output of the updater.\n\nThis paradigm allows us to extract state update functions to pure functions outside the class.\n\n```\nconst incrementCounter = (previousState: State) =\u003e ({ counter: previousState.counter + 1 });\n\nexport class StepperComponent {\n  readonly state: State = initialState;\n  readonly setState = createSetState\u003cState\u003e(this);\n\n  handleStep(): void {\n    this.setState(incrementCounter);\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftlmader%2Fng-set-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftlmader%2Fng-set-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftlmader%2Fng-set-state/lists"}