Ng-connect-state NPM

Connect state - Reactive components in Angular

Automatically bind all asynchronous observables into a simple synchronous sink. Extra features including loading indicators and simple API to reload your observables.

NOTE: Ivy required

Installation

npm install ng-connect-state @ngneat/until-destroy
# Or if you use yarn
yarn add ng-connect-state @ngneat/until-destroy

@ngneat/until-destroy is a peer dependency.

Examples

import { connectState } from 'ng-connect-state';
import { UntilDestroy } from '@ngneat/until-destroy';
import { interval } from 'rxjs';

@UntilDestroy()
@Component({ template: `
  {{ state.timer }}
  <button (click)="state.reload()"</button>
  Loading: {{ state.loading.timer }}
  `
})
export class InboxComponent {
  ngOnDestroy() { }

  /**
   this exposes state.timer as a synchronous value!
  **/
  state = connectState(this, {
    timer: interval(1000),
  })
}

You can bind multiple observables and reload them individually as well:

@UntilDestroy()
@Component({})
export class HomeComponent {
  ngOnDestroy() { }

  constructor(private httpClient: HttpClient) {}

  // We'll dispose it on destroy
  state = connectState(this, {
    users: httpClient.get('/users'),
    projects: httpClient.get('/projects'),
  })

  reloadUsers() {
    this.state.reload('users');
  }
  reloadProjects() {
    this.state.reload('projects');
  }
}