Skip to content

eneajaho/rx-angular

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

RxAngular logo

RxAngular RxAngular CI

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. npm
@rx-angular/template A set of directives and pipes designed for high-performance and non-blocking rendering for large-scale applications. npm
@rx-angular/cdk A Component Development Kit for high-performance and ergonomic Angular UI libs and large-scale applications. npm
@rx-angular/eslint-plugin A set of ESLint rules for building reactive, performant, and zone-less Angular applications. npm

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.

@Component({
  selector: 'app-time',
  standalone: true,
  imports: [LetDirective],
  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 define the state using an interface and use the RxState service to manage it. We also define two actions to increment and decrement the count and use the connect method to update the state in response to these actions. Finally, we use the select method to display the count property of the state in the template.

interface CounterState {
  count: number;
}

interface CounterActions {
  increment: void;
  decrement: void;
}

@Component({
  selector: 'app-counter',
  standalone: true,
  imports: [PushPipe],
  template: `
    <p>Count: {{ count$ | push }}</p>
    <button (click)="actions.increment()">Increment</button>
    <button (click)="actions.decrement()">Decrement</button>
  `,
  providers: [RxState, RxActionFactory],
})
export class CounterComponent {
  readonly count$ = this.state.select('count');
  readonly actions = this.actionFactory.create();

  constructor(
    private readonly state: RxState<CounterState>,
    private readonly actionFactory: RxActionFactory<CounterActions>
  ) {
    this.state.set({ count: 0 });
    this.state.connect(this.actions.increment$, (state) => ({
      count: state.count + 1,
    }));
    this.state.connect(this.actions.decrement$, (state) => ({
      count: state.count - 1,
    }));
  }
}

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.

About

Reactive Extensions for Angular.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.3%
  • Other 1.7%