https://github.com/tauhidul0821/angular-simple-store-by-signal
Created with StackBlitz ⚡️ , Simple Store management by signal
https://github.com/tauhidul0821/angular-simple-store-by-signal
angular behaviorsubject rxjs signal store
Last synced: 3 months ago
JSON representation
Created with StackBlitz ⚡️ , Simple Store management by signal
- Host: GitHub
- URL: https://github.com/tauhidul0821/angular-simple-store-by-signal
- Owner: tauhidul0821
- Created: 2025-01-31T23:00:51.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-02-05T16:28:46.000Z (4 months ago)
- Last Synced: 2025-02-05T16:43:43.725Z (4 months ago)
- Topics: angular, behaviorsubject, rxjs, signal, store
- Language: TypeScript
- Homepage: https://stackblitz.com/~/github.com/tauhidul0821/angular-simple-store-by-signal
- Size: 58.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# This is simple store management project using signal, rxjs, behavior subject
### Step 1: Create the Service
```ts
import { Injectable, signal } from "@angular/core";
@Injectable({
providedIn: "root",
})
export class StorageService {
private storage = signal>({}); // Central storage using signals
// Save data by key
save(key: string, value: any): void {
const currentData = this.storage();
this.storage.set({ ...currentData, [key]: value });
}
// Retrieve data by key
get(key: string): any {
return this.storage()[key];
}
// Delete data by key
remove(key: string): void {
const currentData = this.storage();
const { [key]: _, ...updatedData } = currentData; // Exclude the key to remove
this.storage.set(updatedData);
}
// Get all stored data (optional)
getAll(): Record {
return this.storage();
}
}
```
### Step 2: Use the Service in Components
```ts
import { Component } from "@angular/core";
import { StorageService } from "./storage.service";
@Component({
selector: "app-root",
template: `Save Data`,
})
export class AppComponent {
constructor(private storageService: StorageService) {}
saveData() {
this.storageService.save("user", { name: "John", age: 30 });
console.log("Data saved!");
}
}
```
### Retrieving Data
```ts
import { Component } from "@angular/core";
import { StorageService } from "./storage.service";
@Component({
selector: "app-display",
template: `Show Data`,
})
export class DisplayComponent {
constructor(private storageService: StorageService) {}
showData() {
const userData = this.storageService.get("user");
console.log("Retrieved Data:", userData);
}
}
```
# Using RxJS
### Step 1: Create the Service
```ts
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable({
providedIn: "root",
})
export class StorageService {
private storage = new BehaviorSubject>({});
// Save data by key
save(key: string, value: any): void {
const currentData = this.storage.value;
this.storage.next({ ...currentData, [key]: value });
}
// Retrieve data by key
get(key: string): any {
return this.storage.value[key];
}
// Subscribe to data changes (optional)
watch(key: string) {
return this.storage.asObservable();
}
// Delete data by key
remove(key: string): void {
const currentData = this.storage.value;
const { [key]: _, ...updatedData } = currentData; // Exclude the key to remove
this.storage.next(updatedData);
}
}
```
## Step 2: Use the Service in Components
### Saving Data
```ts
import { Component } from "@angular/core";
import { StorageService } from "./storage.service";
@Component({
selector: "app-root",
template: `Save Data`,
})
export class AppComponent {
constructor(private storageService: StorageService) {}
saveData() {
this.storageService.save("settings", { theme: "dark", language: "en" });
console.log("Data saved!");
}
}
```
### Retrieving Data
```ts
import { Component } from "@angular/core";
import { StorageService } from "./storage.service";
@Component({
selector: "app-settings",
template: `Show Settings`,
})
export class SettingsComponent {
constructor(private storageService: StorageService) {}
showData() {
const settings = this.storageService.get("settings");
console.log("Retrieved Settings:", settings);
}
}
```
### Watching Data Changes
```ts
import { Component, OnInit } from "@angular/core";
import { StorageService } from "./storage.service";
@Component({
selector: "app-watch",
template: `
Check console for updates
`,
})
export class WatchComponent implements OnInit {
constructor(private storageService: StorageService) {}
ngOnInit() {
this.storageService.watch("settings").subscribe((data) => {
console.log("Storage updated:", data);
});
}
}
```
## Comparison: Signals vs. RxJS
| Feature | Angular Signals | RxJS |
|-------------------------|-----------------------------------------------|-------------------------------------------------|
| **Reactivity** | Simplifies state management for local data. | Better for managing streams and asynchronous data. |
| **Simplicity** | Easier to use for small, reactive storage. | Requires more setup but offers more flexibility. |
| **Performance** | Built for Angular and optimized for change detection. | Slightly heavier due to Observable subscriptions. |
---