Please review the way I use SubjectBehaviour in an angular application

I'm building a personal finance app in angular https://github.com/sumaya-aj/personal-finance-app

I started with "Pots" section.

My question: Am I handing the real-time data functionality properly?

I used BehaviourSubject in the PotService. BehaviourSubject gets filled in when user calls loadPots() on PotOverview initialization. When user adds new pot, the BehaviourSubject gets updated.

My question in detail: I tried not to subscribe in the loadPots() function, since I subscribe again in the pots-overview.component.html using async pipe, but if I use pipe() instead of subscribe() in loadPots(), I need to manually refresh the pots list page after I add a new pot, to show the latest data. Is there a cleaner way to implement pots list functionality, knowing that it gets modified from add, edit, and delete functionalities triggered by other components that are not children of PotsOverview component? Is there a way to subscribe once? I insist to use async pipe to handle unsubscription. Is there a better way?

Related Code to the part I'm asking:

1) pot.service.ts

@Injectable({
providedIn: 'root'
})
export class PotService {

private apiUrl = 'http://localhost:3000/pots';

private potsSubject = new BehaviorSubject<Pot[]>([]);

constructor(private http: HttpClient) {}

loadPots(userId: number): Observable<Pot[]> {
this.http.get<Pot[]>(`${this.apiUrl}?userId=${userId}`).subscribe((data) => {
this.potsSubject.next(data);
});
return this.potsSubject.asObservable();
}

addPot(pot: Pot): Observable<Pot> {
return this.http.post<Pot>(this.apiUrl, pot).pipe(
tap((newPot) => {
const currentPots = this.potsSubject.value;
this.potsSubject.next([...currentPots, newPot]);
})
);
}
}


2) pots-overview.component.ts

@Component({
selector: 'app-pots-overview',
standalone: true,
imports: [PotItemComponent, AddEditPotComponent, CommonModule],
templateUrl: './pots-overview.component.html',
styleUrl: './pots-overview.component.css'
})
export class PotsOverviewComponent implements OnInit {

addPotModal?: BsModalRef;
pots$!: Observable<Pot[]>;

constructor(private bsModalService: BsModalService,
private potService: PotService) { }

ngOnInit(): void {
this.pots$ = this.potService.loadPots(1);
}


3) pots-overview.component.html

<div class="col-6" *ngFor="let potItem of pots$ | async">
<app-pot-item [pot]="potItem"></app-pot-item>
</div>


4) add-edit-pot.component.ts

export class AddEditPotComponent implements OnInit {

constructor(private commonService: CommonService,
private potService: PotService,
private bsModalService: BsModalService) { }

onSubmit(form: any): void {
if (form.valid) {
const newPot: Pot = {
user_id: 1,
name: form.value.potName,
target: form.value.target,
total: 0,
theme: {
id: this.selectedThemeId,
color_name: this.selectedThemeName,
hex_code: this.selectedThemeHexCode,
},
};

this.potService.addPot(newPot).subscribe({
next: () => {
form.reset();
this.bsModalService.hide();
},
error: (err) => {
console.error('Error adding pot:', err);
},
});
}
}

Continue reading...