{"id":13808725,"url":"https://github.com/lVlyke/lithium-angular","last_synced_at":"2025-05-14T03:31:23.533Z","repository":{"id":29234309,"uuid":"112295022","full_name":"lVlyke/lithium-angular","owner":"lVlyke","description":"Reactive components made easy! Lithium provides utilities that enable seamless reactive state and event interactions for Angular components.","archived":false,"fork":false,"pushed_at":"2024-01-24T21:38:32.000Z","size":1339,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-17T01:45:15.977Z","etag":null,"topics":["angular","aot","async","binding","component","data-binding","decorators","ivy","lifecycle","lifecycle-event-decorators","lithium","lithium-angular","lithiumjs","ngx","observable","reactive","rxjs","selector","state","typescript"],"latest_commit_sha":null,"homepage":"","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/lVlyke.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":"2017-11-28T06:23:07.000Z","updated_at":"2024-06-03T13:49:06.058Z","dependencies_parsed_at":"2024-06-03T13:49:00.105Z","dependency_job_id":"5d40b260-9287-4b71-b350-da12f4cadeab","html_url":"https://github.com/lVlyke/lithium-angular","commit_stats":null,"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lVlyke%2Flithium-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lVlyke%2Flithium-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lVlyke%2Flithium-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lVlyke%2Flithium-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lVlyke","download_url":"https://codeload.github.com/lVlyke/lithium-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273262,"owners_count":17448074,"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":["angular","aot","async","binding","component","data-binding","decorators","ivy","lifecycle","lifecycle-event-decorators","lithium","lithium-angular","lithiumjs","ngx","observable","reactive","rxjs","selector","state","typescript"],"created_at":"2024-08-04T01:01:50.400Z","updated_at":"2024-11-19T00:31:01.472Z","avatar_url":"https://github.com/lVlyke.png","language":"TypeScript","readme":"\u003c!-- markdownlint-disable MD024 MD031 --\u003e \n\n# Lithium for Angular (@lithiumjs/angular)\n\n[![Coverage](./coverage/coverage.svg)](./coverage/coverage.svg)\n\nReactive components made easy! Lithium provides utilities that enable seamless reactive state and event interactions for Angular components.\n\n## Features\n\n* **Reactive component state**\n\n    Lithium's `ComponentStateRef` service exposes a type-safe representation of component state properties as Subjects, allowing for observation of the component's full state automatically:\n```ts\nimport { ComponentState, ComponentStateRef } from '@lithiumjs/angular';\n\n@Component({\n    ...\n    providers: [ComponentState.create(MyComponent)]\n})\nclass MyComponent {\n\n    public value = 0;\n\n    constructor (stateRef: ComponentStateRef\u003cMyComponent\u003e) {\n        stateRef.get('value').subscribe(value =\u003e console.log(\"value: \", value));\n\n        this.value = 100;\n    }\n\n    // Output:\n    // value: 0\n    // value: 100\n}\n```\n\n* **Reactive lifecycle decorators**\n\n    Lithium adds support for reactive component events, including decorators for component lifecycle events:\n```ts\nimport { OnInit } from '@lithiumjs/angular';\n\n@Component({...})\nclass MyComponent {\n\n    @OnInit() \n    private readonly onInit$: Observable\u003cvoid\u003e;\n\n    constructor () {\n        this.onInit$.subscribe(() =\u003e console.log(\"Reactive ngOnInit!\"));\n    }\n}\n```\n* **Works with Angular component decorators**\n    \n    You can use Angular's built-in component decorators with Lithium. Use an `@Input` as a Subject and listen to a `@HostListener` event as an Observable!\n* **OnPush components made easy**\n\n    By tracking component state changes automatically, Lithium's [AutoPush](/docs/intro-guide.md#autopush) feature allows you to easily write more performant components using [OnPush](https://angular.io/api/core/ChangeDetectionStrategy).\n* **Beyond `async`**\n\n    Lithium automatically manages subscription lifetimes just like Angular's [async pipe](https://angular.io/api/common/AsyncPipe), without its syntax overhead (and [ugly workarounds](https://coryrylan.com/blog/angular-async-data-binding-with-ng-if-and-ng-else)).\n\n## [Intro guide](/docs/intro-guide.md)\n\nRead through the intro guide to get to know Lithium's core features.\n\n## [Example app](https://github.com/lVlyke/lithium-angular-example-app) - [[Live demo]](https://lvlyke.github.io/lithium-angular-example-app)\n\nThe example todo list app showcases real-world usages of Lithium.\n\n## [API reference](/docs/api-reference.md)\n\nFull API documentation is available for Lithium.\n\n## Installation\n\nLithium can be installed [via **npm**](https://www.npmjs.com/package/@lithiumjs/angular) using the following command:\n\n```bash\nnpm install @lithiumjs/angular\n```\n\n## FAQ and Other information\n\nIf you are upgrading from Lithium 6.x or earlier, read through the [migration guide](/docs/lithium-7-migration-guide.md) to see how to updgrade your app to use the latest features from Lithium.\n\n### FAQ\n\n#### Does Lithium support Ivy (the default rendering engine for Angular 9+)?\n\nLithium fully supports Ivy-based applications. **Note**: Please be aware that Lithium currently uses features from the not-yet finialized Ivy API, so some features of Lithium could stop working in later versions of Angular before Lithium is updated to support them.\n\n#### Does Lithium support the ViewEngine (pre-Ivy) applications?\n\nLithium 5.x.x is the last major version that supports ViewEngine-based applications. Lithium 6.x.x and above only supports Ivy-based applications.\n\n### Other information\n\n* [Migration guide](/docs/lithium-7-migration-guide.md) for migrating from Lithium 6.x and below to newer versions of Lithium.\n* [@lithiumjs/ngx-material-theming](https://github.com/lVlyke/lithium-ngx-material-theming) - A theming utility for Angular Material built with Lithium.\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Mixed Utilities"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FlVlyke%2Flithium-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FlVlyke%2Flithium-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FlVlyke%2Flithium-angular/lists"}