JSPM

  • Created
  • Published
  • Downloads 1371
  • Score
    100M100P100Q105284F
  • License MIT

A decorator-based library for Angular that enables seamless reactive data binding using RxJS. Use Observables as first-class citizens in your view templates!

Package Exports

  • @lithiumjs/angular

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lithiumjs/angular) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lithium for Angular (@lithiumjs/angular)

Build Status Coverage

A decorator-based library for Angular that enables seamless reactive data binding using RxJS. Use Observables as first-class citizens in your view templates!

Lithium now supports Ivy with Angular 9! Read here for more info.

Example app - [Live demo]

Introduction

Lithium is a decorator-based library for modern Angular applications that use reactive programming through RxJS. Lithium enables one-way and two-way binding of Observables and Subjects in view templates and allows them to be used just like regular synchronous variables. Lithium makes writing more performant components with OnPush change detection trivial with AutoPush. Lithium is like async but better:

Lithium vs AsyncPipe

Angular has a built-in async pipe that offers many similar features to Lithium. Lithium includes all of the benefits of async with additional features:

  • No syntax overhead - Lithium allows you to treat reactive variables just like normal variables inside templates. There's no pipes to use, and things like nested properties can be accessed easily without ugly workarounds.
  • Reactive two-way binding support - Lithium natively supports two-way binding of Subjects using [(ngModel)] and by direct template assignments (i.e. (click)="foo = 'bar'").
  • Reactive event binding support - Unlike async, Lithium supports reactive event binding. Click events, lifecycle events, and more are Observables that can be subscribed to, instead of invoked as callback functions.
  • Works with Angular component decorators (@Input, @Output, @HostListener and more) - Lithium can be used to make reactive component inputs as Subjects and respond to host events through subscriptions to Observables with no syntax overhead.
  • Useful for components and directives - Lithium's AutoPush functionality can also be used for easily writing OnPush-friendly directives.

Like async, Lithium also has the following benefits:

  • Automatic subscription management - Lithium will automatically end subscriptions when components are destroyed.
  • Simplified OnPush change detection - Using AutoPush, Lithium makes writing OnPush-capable components trivial.
  • Full Ivy compiler support - Lithium supports Angular's new Ivy compiler. See here for more info.
  • Can be used with other reactive libraries - Lithium has full compatability with other decorator-based libraries like NGXS.

Read through the intro guide to get to know Lithium's core features and view the example app to see Lithium in action with real-world use-cases. Full API documentation is also available.

Installation

Lithium can be installed via npm using the following command:

npm install @lithiumjs/angular

FAQ and Other information

FAQ

Does Lithium support ViewEngine (Ivy opt-out, Angular pre-9)

Lithium 3.x.x, the current stable version of Lithium, still supports ViewEngine. Lithium 5.x.x no longer supports the ViewEngine renderer and will only work with Ivy.

Does Lithium support Ivy?

Yes, Lithium 5.x.x supports Ivy with Angular 9.0. However, Lithium uses features from the not-yet finialized Ivy API, so some features could stop working in later versions of Angular 9 before Lithium is updated to support it.

Are there any known limitations with Lithium?

While Lithium integrates cleanly with Angular for the majority of cases, there are certain limitations that are noted here.

Other information