[](https://rx-angular.io/)

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

| Package | Description | Version |

| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |

| [@rx-angular/state](https://rx-angular.io/docs/state) | A powerful state management library, providing a fully reactive way to manage state in components and services. | [](https://www.npmjs.com/package/%40rx-angular%2Fstate) |

| [@rx-angular/template](https://rx-angular.io/docs/template) | A set of directives and pipes designed for high-performance and non-blocking rendering for large-scale applications. | [](https://www.npmjs.com/package/%40rx-angular%2Ftemplate) |

| [@rx-angular/cdk](https://rx-angular.io/docs/cdk) | A Component Development Kit for high-performance and ergonomic Angular UI libs and large-scale applications. | [](https://www.npmjs.com/package/%40rx-angular%2Fcdk) |

| [@rx-angular/eslint-plugin](https://rx-angular.io/docs/eslint-plugin) | A set of ESLint rules for building reactive, performant, and zone-less Angular applications. | [](https://www.npmjs.com/package/%40rx-angular%2Feslint-plugin) |

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 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: `

`,

})

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](https://rx-angular.io/docs/template).

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: `

`,

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](https://rx-angular.io/docs/state).

- [ Slack](https://join.slack.com/t/rxangular/shared_invite/zt-1tn1hivnp-FemQzop69HI7~wlPSqDjKQ)

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](CONTRIBUTING.md) file. We appreciate your help in making RxAngular better for everyone.

This project is MIT licensed.

[](https://www.npmjs.com/package/%40rx-angular%2Feslint-plugin)