ngx-connect v0.0.1

ngx-connect

Decorator to simplify use of component-state in angular applications.

import { connect } from 'ngx-connect';

@Component({
  selector: 'stateful-cmp',
  template: `
    <div *ngIf="loading">loading...</div>
    <div>Interval: {{ state.interval }}</div>
    <div>Values: {{ state.data }}</div>
  `
})
export class StatefulComponent {
  @connect() state = {
    title: interval(1000).pipe(map(i => `test ${ i }`)),
    data: this.someService.getData()
  };

  @connect() loading = this.someService.loading;
  
  constructor(private readonly someService: SomeService) {}
}

The property annotated with the connect decorator can hold an Observable or a ObservableMap (object with Observable properties). This Observable/These Observables will be subscribed to in order to provide its/their latest value and trigger change-detection on arrival of any new data accordingly.