@lithiumjs/angular
v8.0.0
Published
Reactive components made easy. Lithium provides utilities that enable seamless reactive state and event interactions for Angular components.
Downloads
3,104
Maintainers
Readme
Lithium for Angular (@lithiumjs/angular)
Reactive components made easy! Lithium provides utilities that enable seamless reactive state and event interactions for Angular components.
Check out the full README for more information.
Features
Reactive component state
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:
import { ComponentState, ComponentStateRef } from '@lithiumjs/angular';
@Component({
...
providers: [ComponentState.create(MyComponent)]
})
class MyComponent {
public value = 0;
constructor (stateRef: ComponentStateRef<MyComponent>) {
stateRef.get('value').subscribe(value => console.log("value: ", value));
this.value = 100;
}
// Output:
// value: 0
// value: 100
}
Reactive lifecycle decorators
Lithium adds support for reactive component events, including decorators for component lifecycle events:
import { OnInit } from '@lithiumjs/angular';
@Component({...})
class MyComponent {
@OnInit()
private readonly onInit$: Observable<void>;
constructor () {
this.onInit$.subscribe(() => console.log("Reactive ngOnInit!"));
}
}
Works with Angular component decorators
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!OnPush components made easy
By tracking component state changes automatically, Lithium's AutoPush feature allows you to easily write more performant components using OnPush.
Beyond
async
Lithium automatically manages subscription lifetimes just like Angular's async pipe, without its syntax overhead (and ugly workarounds).
Installation
Lithium can be installed via npm using the following command:
npm install @lithiumjs/angular
More information
Check out the full README for more information, including usage guides and API documentation.