npmpackage.info

@rx-angular/template

Reactive Extensions for Angular.

18.0.3

1,909

MIT

TypeScript

3,858,053 5.2

Installations

npm install @rx-angular/template

Score

61.9

Supply Chain

91.3

Quality

86.1

Maintenance

100

Vulnerability

97.6

License

Pull Requests

Open

24

Total

1,373

Closed

604

Merged

745

Issues

Open

124

Total

439

Closed

315

Releases

template@18.0.3

Published on 03 Oct 2024

state@18.1.0

Published on 03 Oct 2024

isr@18.1.0

Published on 04 Sept 2024

template@18.0.2

Published on 04 Sept 2024

isr@18.0.3

Published on 23 Aug 2024

template@18.0.1

Published on 01 Aug 2024

View all 52 releases

Developer

rx-angular

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

20.17.0

NPM Version

10.8.2 Statistics

1,909 Stars

2,650 Commits

198 Forks

34 Watching

34 Branches

93 Contributors

Updated on 26 Nov 2024

Languages

TypeScript (93.63%)

MDX (5.13%)

JavaScript (0.38%)

SCSS (0.38%)

HTML (0.37%)

CSS (0.11%)

Total Downloads

Cumulative downloads

Total Downloads

3,858,053

Last day

-19.8%

4,434

Compared to previous day

Last week

11.1%

27,383

Compared to previous week

Last month

20.4%

112,789

Compared to previous month

Last year

22.6%

1,113,649

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

ng-morph tslib

Peer Dependencies

@angular/core @rx-angular/cdk rxjs

Versions

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.

1import { RxLet } from '@rx-angular/template/let';
2
3@Component({
4  selector: 'app-time',
5  standalone: true,
6  imports: [RxLet],
7  template: `
8    <ng-container *rxLet="time$; let value">
9      {{ value }}
10    </ng-container>
11  `,
12})
13export class TimeComponent {
14  time$ = timer(0, 1000).pipe(map(() => new Date().toTimeString()));
15}

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.

1import { rxState } from '@rx-angular/state';
2import { rxEffects } from '@rx-angular/state/effects';
3import { rxActions } from '@rx-angular/state/actions';
4import { RxPush } from '@rx-angular/template/push';
5
6@Component({
7  selector: 'app-counter',
8  standalone: true,
9  imports: [RxPush],
10  template: `
11    <p>Count: {{ count$ | push }}</p>
12    <button (click)="actions.increment()">Increment</button>
13    <button (click)="actions.decrement()">Decrement</button>
14  `,
15})
16export class CounterComponent {
17  readonly actions = rxActions<{
18    increment: void;
19    decrement: void;
20  }>();
21
22  private readonly state = rxState<{
23    count: number;
24  }>(({ set, connect }) => {
25    set({ count: 0 });
26    connect(this.actions.increment$, (state) => ({
27      count: state.count + 1,
28    }));
29    connect(this.actions.decrement$, (state) => ({
30      count: state.count - 1,
31    }));
32  });
33
34  readonly count$ = this.state.select('count');
35
36  constructor() {
37    rxEffects(({ register }) => {
38      register(this.count$, (count) => console.log(`Count changed: ${count}`));
39    });
40  }
41}

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

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

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

SAST

Determines if the project uses static code analysis.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

4

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:120: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:126: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:129: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-and-test.yml:135: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/build-and-test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/label.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/rx-angular/rx-angular/label.yml/main?enable=pin
Info: 0 out of 13 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@rx-angular/template

Installations

Score

Pull Requests

24

1,373

604

745

Issues

124

439

315

Releases

Developer

Developer Guide

ESM

No

20.17.0

10.8.2

Statistics

Languages

Total Downloads

3,858,053

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

RxAngular

Packages

Getting Started

Using @rx-angular/template

Using @rx-angular/state

Used by

Links

Contributing

License

10

10

10

10

10

4

4

0

0

0

0

0

5.2

/10

Using `@rx-angular/template`

Using `@rx-angular/state`