https://github.com/rush/ng-connect-state

Reactive components for Angular!
https://github.com/rush/ng-connect-state

Last synced: 18 days ago
JSON representation

Reactive components for Angular!

• Host: GitHub
• URL: https://github.com/rush/ng-connect-state
• Owner: Rush
• License: mit
• Created: 2020-07-20T05:53:45.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-02-04T08:36:51.000Z (almost 2 years ago)
• Last Synced: 2024-10-15T06:51:33.781Z (22 days ago)
• Language: TypeScript
• Size: 2.46 MB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

![ng-connect-state](https://github.com/Rush/ng-connect-state/workflows/ng-connect-state/badge.svg)

**NOTE: Ivy required**

## Installation

```bash

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

```ts

import { connectState } from 'ng-connect-state';

import { UntilDestroy } from '@ngneat/until-destroy';

import { interval } from 'rxjs';

@UntilDestroy()

@Component({ template: `

  {{ state.timer }}

  

  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:

```ts

@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');

  }

}

```

## Contributors ✨

This project's structuce is based on the amazing [@ngneat/until-destroy](https://github.com/ngneat/until-destroy) repository! Many thanks.

## License

MIT