rx-subscribe

AsyncPipe alternative for handling Observable data safely.

Angular's AsyncPipe ({{ source$ | async }}) has Initial Null Problem. Every AsyncPipe returns null as the initial value once because transform() method must return a value synchronously. As the result templates with AsyncPipe cannot be type-checked enough.

*rxSubscribe directive solves that all.

Features

• ✅ null-less async data-binding
• ✅ Full-Typed Template (with strictTemplates flag)
• ✅ OnPush-Friendly

Table of Contents

• Installation
• Usage

Installation

NPM

npm install @soundng/rx-subscribe --save

Usage

Import RxSubscribeModule

import { RxSubscribeModule } from '@soundng/rx-subscribe';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RxSubscribeModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use *rxSubscribe directive in templates

<div *rxSubscribe="source$; let state">
  {{ state.count }}
</div>

*rxSubscribe directive will subscribe source$ and render its template with the snapshot value named state. It won't render any view until the first value has been emitted. And automatically it unsubscribes the source$ on destroy. That template can be regarded as the following code:

source$.subscribe(state => {
  console.log(state.count);
});

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!