https://github.com/eneajaho/observable-store
An observable store built with rxjs, ideal for small/medium projects.
https://github.com/eneajaho/observable-store
angular rxjs store
Last synced: 5 months ago
JSON representation
An observable store built with rxjs, ideal for small/medium projects.
- Host: GitHub
- URL: https://github.com/eneajaho/observable-store
- Owner: eneajaho
- License: mit
- Created: 2020-05-16T14:50:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:16:14.000Z (about 3 years ago)
- Last Synced: 2025-04-06T05:16:54.664Z (12 months ago)
- Topics: angular, rxjs, store
- Language: TypeScript
- Homepage: https://github.com/eneajaho/observable-store/tree/master/src/app/store
- Size: 2.09 MB
- Stars: 15
- Watchers: 3
- Forks: 3
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Run Project Locally - [Live project][https://observable-store.eneajaho.me/]
**Install node modules**
```bash
npm install
```
**Start Angular app**
```bash
ng s -o
```
**Start json-server**
```bash
json-server --watch db.json
```
### What's included
- Smart components (Containers)
- Dumb components (Presenters)
- Lazy loading modules
- Reactive forms
- Interceptors
- Resolvers
- Services
- Facades
- Guards
- Pipes
- Models
- **Observable Store** - [Docs](https://github.com/eneajaho/observable-store/blob/master/src/app/store/README.md)
### CRUD data in services or components
```js
constructor(private http: HttpClient, private store: Store) { }
getFavorites(): Observable<{ id: number }[]> {
return this.http.get<{ id: number }[]>(`${this.api}/favorites`)
.pipe(tap(res => this.store.set('favorites', res)));
}
addFavorite(id: number): Observable {
return this.http.post(`${this.api}/favorites`, { id }).pipe(
tap(() => this.store.setItem('favorites', id, { id }))
);
}
removeFavorite(id: number): Observable {
return this.http.delete(`${this.api}/favorites/${id}`).pipe(
tap(() => this.store.removeItem('favorites', id))
);
}
```
### Getting data from store
```js
movies$: Observable;
favorites$: Observable;
constructor(private store: Store) { }
ngOnInit() {
this.movies$ = this.store.select('movies');
this.favorites$ = this.store.select('favorites');
}
```
### Screenshot
[https://observable-store.eneajaho.me/]: https://observable-store.eneajaho.me/
---
> License: **MIT**
> Author: **Enea Jahollari**