rx-angular

1932

205

rx-angular

Added on December 21, 2024

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

rx-angular

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

rx-angular

README.md

RxAngular logo

RxAngular

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

Packages

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

Getting Started

Using @rx-angular/template

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 property time$, which is an Observable that emits a value every second using the timer operator. The emitted values are mapped to the current time string using the map 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>
  `,
})
export class TimeComponent {
  time$ = timer(0, 1000).pipe(map(() => new Date().toTimeString()));
}

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

Using @rx-angular/state

In this example, we're creating a fully reactive counter component. We use rxState to manage the component's state, rxActions to define structured actions for state updates (specifically increment and decrement), and rxEffects 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>
  `,
})
export class CounterComponent {
  readonly actions = rxActions<{
    increment: void;
    decrement: void;
  }>();

  private readonly state = 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,
    }));
  });

  readonly count$ = 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 at https://rx-angular.io/docs/state.

Used by

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

Links

Contributing

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

License

This project is MIT licensed.


Made with ❤ by push-based.io

Related Content

ng-mocks

An Angular testing library for creating mock services, components, directives, pipes and modules in unit tests. It provides shallow rendering, precise stubs to fake child dependencies. ng-mocks works with Angular 5 6 7 8 9 10 11 12 13 14 15 16, jasmine and jest.
GitHubUpdated 2 days ago

ngx-progressbar

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
GitHubUpdated 24 days ago

user-flow cli

This is a library & CLI to organize and run lighthouse user flows in an organized and scalable way 🛸 with CI automation in place
GitHubUpdated 5 months ago

ngx-isr

Incremental Static Regeneration (ISR) enables developers and content editors to use static-generation on a per-page basis, without needing to rebuild the entire site.
GitHubUpdated 17 months ago

Observable Store

Observable Store is a front-end state management library that provides a simple yet powerful way to manage state in front-end applications such as Angular, React, or Vue. Front-end state management has become so complex that many of us spend more hours working on the state management code than on the rest of the application. Observable Store has one overall goal - keep it simple.
GitHubUpdated 19 months ago

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.