How to subscribe to observables in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Subscribing to observables is fundamental for handling asynchronous data in Angular applications, enabling reactive programming patterns for API calls and user interactions.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented observable subscriptions in countless Angular applications and enterprise dashboards.
From my 25 years of experience in web development and 11 years with Angular, the most effective approach is to use the subscribe() method with proper subscription management to prevent memory leaks.
This pattern provides reactive data handling and automatic cleanup when components are destroyed.
Use the subscribe() method to handle observable data and store subscriptions for proper cleanup.
import { Component } from '@angular/core'
import { Subscription } from 'rxjs'
import { UserService } from './user.service'
@Component({
selector: 'app-users',
template: `
<div *ngFor="let user of users">
{{ user.name }} - {{ user.email }}
</div>
<div *ngIf="loading">Loading...</div>
<div *ngIf="error">{{ error }}</div>
`
})
export class UsersComponent {
users: any[] = []
loading = false
error: string | null = null
private subscription = new Subscription()
constructor(private userService: UserService) {}
ngOnInit() {
this.loading = true
const userSub = this.userService.getUsers().subscribe({
next: (users) => {
this.users = users
this.loading = false
},
error: (err) => {
this.error = 'Failed to load users'
this.loading = false
}
})
this.subscription.add(userSub)
}
ngOnDestroy() {
this.subscription.unsubscribe()
}
}
The subscribe() method accepts an observer object with next, error, and complete callbacks to handle different observable states. Store subscriptions in a Subscription object and use add() to manage multiple subscriptions together. Always implement OnDestroy and call unsubscribe() to prevent memory leaks when components are destroyed. The next callback receives emitted data, error handles any errors, and complete executes when the observable completes.
This is the same subscription management pattern we use in CoreUI Angular templates to ensure proper resource cleanup and prevent memory leaks. For simpler cases, consider using the async pipe in templates instead of manual subscriptions, as it automatically handles subscription lifecycle management.
