What it means

@rs-x/angular includes the RsxPipe impure pipe and the providexRsx() provider function. The pipe wraps an rs-x expression (string or pre-built IExpression) and calls ChangeDetectorRef.markForCheck() whenever the expression value changes. providexRsx() connects the rs-x DI container to Angular's dependency injection system during APP_INITIALIZER.

Practical value

You can mutate the model anywhere in your app, for example from a service, a WebSocket handler, or a button click, and every template that reads that data updates automatically. No BehaviorSubjects, no ngrx actions, and no manually managed subscriptions. The pipe is impure by design, so Angular calls transform() on each change-detection cycle, but it only allocates a new expression when the input actually changes.

Key points

The pipe is impure (pure: false) — Angular checks it every change-detection cycle, but the pipe itself only recreates the expression when the expression string or context object changes.
Pass an expression string and a context object: {{ "a + b" | rsx: model }}. Or pass a pre-built IExpression and omit the context: {{ expr | rsx }}.
When the pipe owns the expression (string input), it disposes the expression on ngOnDestroy. When you pass a pre-built IExpression, the pipe only subscribes — you own the lifecycle.
providexRsx() registers an APP_INITIALIZER provider that loads the rs-x module, along with providers for IExpressionFactoryToken and IExpressionChangeTransactionManagerToken.
Inject the change transaction manager with IExpressionChangeTransactionManagerToken when you want to batch multiple model updates into a single change notification — especially when many fields change together.
Passing null or undefined to the pipe is safe — it renders nothing and cleans up any previous expression.

RsxPipe — pre-built IExpression example

Build the expression once in the component class and pass it to the pipe. The pipe subscribes to changes, while the component owns the expression lifecycle.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

RsxPipe — string expression example

Pass a string expression plus a model object. The pipe creates, owns, and disposes the expression for you.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

Expression change transactions example

Run the same two async updates with and without a transaction and compare the emitted updates.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

import { ChangeDetectionStrategy, Component, OnDestroy, inject } from '@angular/core';
import { rsx } from '@rs-x/expression-parser';
import {
  IExpressionChangeTransactionManagerToken,
  RsxPipe,
} from '@rs-x/angular';

@Component({
  selector: 'app-order-total',
  standalone: true,
  imports: [RsxPipe],
  template: `
    <h3>Measured values</h3>
    <dl>
      <div>
        <dt>Price</dt>
        <dd>{{ model.price }}</dd>
      </div>
      <div>
        <dt>Quantity</dt>
        <dd>{{ model.quantity }}</dd>
      </div>
      <div>
        <dt>Total</dt>
        <dd>{{ totalExpr | rsx }}</dd>
      </div>
      <div>
        <dt>Last action emit count</dt>
        <dd>{{ stats.commits }}</dd>
      </div>
      <div>
        <dt>Expected emit count</dt>
        <dd>{{ stats.expected }}</dd>
      </div>
      <div>
        <dt>Result</dt>
        <dd>{{ resultText }}</dd>
      </div>
    </dl>

<h3>How to read this</h3>
    <p>Both buttons apply the same two updates: increase price by 10 and quantity by 1.</p>
    <p>
      The difference is timing: the first button splits them into two async
      steps, while the transaction keeps those async steps batched until the end.
    </p>

<h3>Try it</h3>
    <button (click)="runWithoutTransaction()" [disabled]="stats.running">
      Run async updates without transaction
    </button>
    <button (click)="runWithTransaction()" [disabled]="stats.running">
      Run async updates with transaction
    </button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class OrderTotalComponent implements OnDestroy {
  private readonly tx = inject(IExpressionChangeTransactionManagerToken);

protected readonly model = {
    price: 100,
    quantity: 2,
  };

protected readonly stats = {
    commits: 0,
    expected: 0,
    lastMode: 'none',
    running: false,
  };

protected readonly totalExpr = rsx<number>('price * quantity')(this.model);
  private readonly subscription = this.totalExpr.changed.subscribe(() => {
    this.stats.commits += 1;
  });

protected get resultText(): string {
    if (this.stats.lastMode === 'none') {
      return '';
    }

return this.stats.commits === this.stats.expected
      ? 'Verified: ' + this.stats.lastMode + ' emitted ' + this.stats.commits + ' time(s).'
      : 'Unexpected: ' + this.stats.lastMode + ' emitted ' + this.stats.commits + ' time(s), expected ' + this.stats.expected + '.';
  }

protected async runWithoutTransaction(): Promise<void> {
    this.stats.commits = 0;
    this.stats.expected = 2;
    this.stats.lastMode = 'Async updates';
    this.stats.running = true;
    this.model.price += 10;
    await Promise.resolve();
    this.model.quantity += 1;
    this.stats.running = false;
  }

protected async runWithTransaction(): Promise<void> {
    this.stats.commits = 0;
    this.stats.expected = 1;
    this.stats.lastMode = 'Transaction';
    this.stats.running = true;
    this.tx.suspend();
    this.model.price += 10;
    await Promise.resolve();
    this.model.quantity += 1;
    this.tx.continue();
    this.stats.running = false;
  }

public ngOnDestroy(): void {
    this.subscription.unsubscribe();
    this.totalExpr.dispose();
  }
}

Setup — standalone app

Register providexRsx() in your application config.

import { ApplicationConfig } from '@angular/core';
import { providexRsx } from '@rs-x/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    ...providexRsx(),
  ],
};

Setup — NgModule app

Import RsxPipe and spread providexRsx() into the providers array.

import { NgModule } from '@angular/core';
import { RsxPipe, providexRsx } from '@rs-x/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [RsxPipe],
  providers: [...providexRsx()],
  bootstrap: [AppComponent],
})
export class AppModule {}

RsxPipe — async values

Observable and Promise-backed fields work without a separate async pipe.

Preview

Edit the code and the preview recompiles from that updated source.

Live demo

Code

RsxPipe — null safety

Passing null or undefined is safe and renders as an empty string.

// Passing null or undefined is safe — the pipe renders nothing
// and does not create or hold an expression.

@Component({
  template: `
    <span>{{ maybeExpr | rsx }}</span>
  `,
})
export class SafeComponent {
  maybeExpr: string | null = null; // renders as empty string
}

Installation

Run rsx init in your Angular project to detect the framework, install the right packages, and apply the setup automatically. See the CLI docs.

rsx init

Angular integration

What it means

Practical value

Key points

RsxPipe — pre-built IExpression example

RsxPipe — string expression example

Expression change transactions example

Setup — standalone app

Setup — NgModule app

RsxPipe — async values

RsxPipe — null safety

Installation

Related docs