<style type="text/css"> .row { width: 100%; display: flex; border: 1px solid red; } .row .col { width: 50%; } </style>

RxAngular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

RxAngular is divided into the following independent packages:

State

Template

Used together, you get a powerful tool for developing high-performance angular applications with or without NgZone.

This repository holds a set of helpers to create fully reactive as well as fully zone-less applications.

Homepage

https://rx-angular.github.io/rx-angular/#/

Packages

Find details in the linked readme files below for installation and setup instructions, examples and resources.

📦@rx-angular/state - Reactive Component State-Management

Description:
RxState is a light-weight, flexible tool to manage component state in efficiently. It ships with a light weight state management, RxJS operators and transformation helpers.

Setup:

• npm install --save @rx-angular/state
• yarn add @rx-angular/state

Features:

• Reactive Component-State RxState
• State as a signal .$.pipe(map(s => s.prop))
  • Imperative style
    • .set('prop', (oldState, value) => oldState.prop + value)
    • .get('prop')
  • Reactive style
    • .connect('prop', prop$)
    • .select(map(s => s.prop))
  • Reactive side-effects .hold(trigger$, effectFn)
  • Configurable composition .setAccumulator(trigger$, effectFn)
• Reactive state management operators
  • o$.pipe(select(map(s => s.prop))]()
  • o$.pipe(selectSlice(['prop'], {prop})]()
  • o$.pipe(stateful()
  • o$.pipe(distinctUntilSomeChanged(['prop'], {list})]()
• Imperative state transformation helper
  • Array []: insert , remove , toDictionary, update
  • Object {}: deleteProp , dictionaryToArray, patch , setProp , toggle

📦@rx-angular/template - High-Performance Reactive Rendering

Description:
RxState is a light-weight, flexible tool to manage component state in efficiently. It ships with a light weight state management, RxJS operators and transformation helpers.

Setup:

• npm install --save @rx-angular/template
• yarn add @rx-angular/template

Features: