Repository files navigation

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

RxAngular is made up of different packages that work together or standalone.

Package	Description	Version
@rx-angular/state	A powerful state management library, providing a fully reactive way to manage state in components and services.
@rx-angular/template	A set of directives and pipes designed for high-performance and non-blocking rendering for large-scale applications.
@rx-angular/cdk	A Component Development Kit for high-performance and ergonomic Angular UI libs and large-scale applications.
@rx-angular/isr	A library that enables Angular Universal applications to generate static pages at runtime and then update them incrementally on demand or on a schedule.
@rx-angular/eslint-plugin	A set of ESLint rules for building reactive, performant, and zone-less Angular applications.

This repository holds a set of helpers that are aiming to provide:

• fully reactive applications
• fully or partially zone-less applications
• high-performance and non-blocking rendering

This is an example of how to use the*rxLet directive to bind an Observable value to the template. In this example, the component defines a propertytime$, which is an Observable that emits a value every second using thetimer operator. The emitted values are mapped to the current time string using themap operator which is then displayed in the template using*rxLet.

import{RxLet}from'@rx-angular/template/let';@Component({selector:'app-time',standalone:true,imports:[RxLet],template:`    <ng-container *rxLet="time$; let value">      {{ value }}    </ng-container>  `,})exportclassTimeComponent{time$=timer(0,1000).pipe(map(()=>newDate().toTimeString()));}

To learn more about@rx-angular/template and its capabilities, check out the official documentation athttps://rx-angular.io/docs/template.

In this example, we're creating a fully reactive counter component. We userxState to manage the component's state,rxActions to define structured actions for state updates (specificallyincrement anddecrement), andrxEffects to trigger side-effects when state changes occur. These mechanisms collectively enable efficient state management, action handling, and side-effect execution, resulting in a responsive and well-structured counter component.

import{rxState}from'@rx-angular/state';import{rxEffects}from'@rx-angular/state/effects';import{rxActions}from'@rx-angular/state/actions';import{RxPush}from'@rx-angular/template/push';@Component({selector:'app-counter',standalone:true,imports:[RxPush],template:`    <p>Count: {{ count$ | push }}</p>    <button (click)="actions.increment()">Increment</button>    <button (click)="actions.decrement()">Decrement</button>  `,})exportclassCounterComponent{readonlyactions=rxActions<{increment:void;decrement:void;}>();privatereadonlystate=rxState<{count:number;}>(({ set, connect})=>{set({count:0});connect(this.actions.increment$,(state)=>({count:state.count+1,}));connect(this.actions.decrement$,(state)=>({count:state.count-1,}));});readonlycount$=this.state.select('count');constructor(){rxEffects(({ register})=>{register(this.count$,(count)=>console.log(`Count changed:${count}`));});}}

To learn more about@rx-angular/state and its capabilities, check out the official documentation athttps://rx-angular.io/docs/state.

Large scale application	Medium size project	Small project
Url:https://clickup.com Platforms: Web	Url:https://get.tapeapp.com Platforms: Web, Mobile (ionic)	Url:https://angular-movies-a12d3.web.app Platforms: Web

• 📚 Official docs
• Discord channel
• Slack

We welcome contributions from the community to help improve RxAngular! To get started, please take a look at our contribution guidelines in theCONTRIBUTING.md file. We appreciate your help in making RxAngular better for everyone.

This project is MIT licensed.

Made with ❤ bypush-based.io