Signal instead BehaviorSubjects
In the context of managing API payload updates, Angular Signals can be a more streamlined alternative to the traditional approach of using services with BehaviorSubjects.
Goals
- Real-time Profile Updates: Leveraging Signals ensures immediate reflection of user profile changes.
- Responsive Profile Component: Employing Signal for direct data binding in our template streamlines the process. This eliminates the necessity for manual subscription management or the use of the async pipe, ensuring consistent synchronization between the UI and the profile data.
- Streamlined State Management: Angular Signals simplifies the management of user profiles, eliminating the need to distinguish between initial and subsequent data loads—automatic reactions to Signal changes handle everything seamlessly.
- Make it "realistic" as posible and consume external API (ei: jsonplaceholder)
Code
// profile.service.ts
import { Injectable, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, retry, of } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class ProfileService {
userProfileSignal = signal<any | null>(null); // set null initial value
constructor(private http: HttpClient) {}
fetchProfile() {
console.log('trigger fetchProfile');
this.http
.get<any>(`https://jsonplaceholder.typicode.com/users`)
.pipe(
retry(3),
catchError((error) => {
console.error('Error fetching profile:', error);
return of(1);
})
)
.subscribe((profile) => {
// subscribe to a signal to receive updates.
console.log('API Response:', profile);
this.userProfileSignal.set(profile);
console.log('set userProfileSignal', this.userProfileSignal);
});
}
}
// profile.component
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ProfileService } from './profile.service';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'app-profile-details',
standalone: true,
imports: [CommonModule, HttpClientModule],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *ngIf="userProfile">
<div *ngFor="let profile of userProfile; let i = index">
<h1>{{ profile.name }}</h1>
<p>Username: {{ profile.username }}</p>
<p>Email: {{ profile.email }}</p>
<p>Address: {{ profile.address.street }}, {{ profile.address.suite }}, {{ profile.address.city }} {{ profile.address.zipcode }}</p>
<p>Phone: {{ profile.phone }}</p>
<p>Website: {{ profile.website }}</p>
<p>Company: {{ profile.company.name }}</p>
<hr *ngIf="i !== userProfile.length - 1" />
</div>
<hr />
</div>
<button (click)="fetchProfile()">Fetch Profile</button>
`,
})
export class ProfileComponent {
userProfile: any;
constructor(private profileService: ProfileService) {
this.profileService.fetchProfile();
}
fetchProfile() {
this.userProfile = this.profileService.userProfileSignal();
this.profileService.fetchProfile();
}
}
Repo
https://github.com/leolanese/Angular-Signal-API-Request
Demo
https://stackblitz.com/edit/stackblitz-starters-qfstzx?file=src%2Fmain.ts
💯 Thanks!
Now, don't be an stranger. Let's stay in touch!
Top comments (0)