Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@soundng/rx-subscribe

2.0.0 • Public • Published

rx-subscribe

AsyncPipe alternative for handling Observable data safely.


MIT commitizen PRs styled with prettier All Contributors

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

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


Suguru Inatomi

💻

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

Install

npm i @soundng/rx-subscribe

DownloadsWeekly Downloads

6

Version

2.0.0

License

MIT

Unpacked Size

105 kB

Total Files

37

Last publish

Collaborators

  • avatar