@lithiumjs/angular

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.