https://github.com/alcfeoh/ngx-signalify

A small library to convert RxJs Observables into Angular Signals
https://github.com/alcfeoh/ngx-signalify

angular observables rxjs signals

Last synced: about 17 hours ago
JSON representation

A small library to convert RxJs Observables into Angular Signals

• Host: GitHub
• URL: https://github.com/alcfeoh/ngx-signalify
• Owner: alcfeoh
• Created: 2024-06-07T23:10:31.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-13T22:58:51.000Z (4 months ago)
• Last Synced: 2024-08-20T15:07:20.559Z (4 months ago)
• Topics: angular, observables, rxjs, signals
• Language: TypeScript
• Homepage:
• Size: 132 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - ngx-signalify - A small library to convert RxJs Observables into Angular Signals. (Table of contents / Angular)
• fucking-awesome-angular - ngx-signalify - A small library to convert RxJs Observables into Angular Signals. (Table of contents / Angular)
• fucking-awesome-angular - ngx-signalify - A small library to convert RxJs Observables into Angular Signals. (Table of contents / Angular)

README

        
# NgxSignalify (for Angular)

To install: `npm install ngx-signalify`

Then, turn any `Observable` into a `SignalState` object with information about:

- Are we still loading data?

- What's the current data?

- Did any error happen?

Example in your component Typescript code:

```javascript

  import { signalify } from 'ngx-signalify'; 

  http = inject(HttpClient);

  comments = signalify(this.http.get(URL));

```

HTML template:

```angular17html

 @if(comments.loading()) {

      Loading comments...

 } @else {

    We have {{comments.data()?.length}} comments

 }

 @if (comments.error()) {

      Something went wrong!

 }

```

The `SignalState` object has 3  properties - `loading`, `data`, and `error` - all Angular signals:

```typescript

export interface SignalState {

  loading: Signal;

  data: Signal;

  error: Signal;

}

```

And that's it! You can `signalify` any `Observable` into a `SignalState` object.

Live example: https://stackblitz.com/edit/ngx-signalify-demo