Lithium for Angular (@lithiumjs/angular)

A decorator-based library that allows you to fully use RxJS with Angular. Use Observables as first-class citizens in your view templates! Listen to component lifecycle events with Observables! Lithium makes your components highly reactive.

Lithium now supports Ivy as of Angular 9.0.0! Read the FAQ for more info.

• Introduction
• Installation
• Quick Start Guide
• Ivy Compiler Guide
• API Reference
• FAQ and Other Information

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 currently supports both ViewEngine and Ivy builds. Lithium will automatically detect which compiler is being used in your app.

Does Lithium support Ivy (Angular 9 default compiler)?

Yes, Lithium fully supports Ivy as of Angular 9.0.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 them.

If you are upgrading an existing Lithium-enabled app to Ivy, you should read the Ivy upgrade guide for Lithium.

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

• Ivy upgrade guide for Lithium.
• @lithiumjs/ngx-material-theming
• Lithium extensions for Ionic.