README

@rx-angular/template

Reactive Template Rendering for Angular

@rx-angular/template is a comprehensive toolset for fully reactive rendering in Angular. It leverages the latest Browser APIs (while still being backwards compatible) to maximize the rendering performance and thus the user experience of your angular application. The functionalities are provided by structural directives, pipes, RxJS operators, or imperative functions to manage the rendering in Angular.

template logo

Description

@rx-angular/template is nothing less than a revolution in ChangeDetection for angular applications. Developers are provided with tools for high-performance rendering, which are operated by a broad and intuitive API.

The LetDirective (*rxLet) & PushPipe (push) focus on template rendering, the coordination and optimization of ChangeDetection cycles. While the PushPipe is a straight drop in replacement for the AsyncPipe (async), the LetDirective will often provide a more convenient way of managing reactive sources and lazy rendering of the view.

Using those with the default strategy (Local Strategy) should already improve the rendering performance of your application by a decent amount.

The applied optimization behavior is fully customizable by using built-in or custom provided (coming soon) RenderStrategies.
However, RenderStrategies are also meant to be as a tool developers can interact with inside their components, giving you an even broader access to the rendering mechanisms of your application. The API comes with imperative as well as reactive ways to manage renderings. By default, changes get scoped, coalesced and scheduled using the latest browser APIs. Beyond to the use of the scheduling APIs in the browser, local rendering of components is also key for a smooth experience.

If you plan to improve your rendering performance to the maximum possible, there are several techniques that need to be known and considered.

Installation

Using schematics:

ng add @rx-angular/template
# or
nx add @rx-angular/template

Manually:

npm install --save @rx-angular/template @rx-angular/cdk
# or
yarn add @rx-angular/template @rx-angular/cdk

Update

If you are using @rx-angular/template already, please consider upgrading with the @angular/cli update command in order to make sure all provided code migrations are processed properly.

ng update @rx-angular/template
# or with nx
nx migrate @rx-angular/template

API

API Documentation

Basic setup

You can import each feature module individually.

import { LetModule, PushModule, ViewportPrioModule } from '@rx-angular/template';

@NgModule({
  declarations: [...],
  imports: [LetModule, PushModule, ViewportPrioModule],
})
export class MyModule {}

Features

Experimental features

Additionally, @rx-angular/template provides some experimental optimization tools which in general will give you more control about what changes are leading to re-renderings.