Angular 16 Is Out Now: Learn How to Replace RxJS with Signals
Signals are meant to replace RxJS to simplify your reactive code.
Here I have one specific real-world example for you, raw code comparison. Nothing more, nothing less!
But but but… Signals & RxJS right — it’s not supposed to replace it?
Couldn’t help myself and spark a little controversy in the title. The example I have is completely replacing RxJS implementation with Signals.
Signals are meant to replace RxJS to simplify your reactive code. However, only synchronous RxJS code — I wouldn’t replace asynchronous parts :).
Search & Pagination (RxJS)
Here is the RxJS code of a small feature that allows you to search for a user and use pagination. It’s meant to showcase how synchronous RxJS code can be simplified with Signals.
I asked for a code review for these parts. While I have been talking with my friends — each one of them found different things to improve in my initial code and had a different vision of how this could look like.
Additionally, there have been occasional bugs and potential memory leaks. This is exactly why working with synchronous RxJS is not ideal. I also bet that looking at this example you also have a different kind of implementation in mind!
const users = [
{ id: 1, name: 'Spiderman' },
{ id: 2, name: 'Hulk' },
{ id: 3, name: 'Wolverine' },
{ id: 4, name: 'Cyclops' },
{ id: 5, name: 'Venom' },
];
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<input [ngModel]="searchInput$ | async" (ngModelChange)="searchUser($event)" placeholder="Search">
<ul>
<li *ngFor="let user of paginatedAndFilteredUsers$ | async">{{ user.name }}</li>
</ul>
<button (click)="goToPrevPage()">Previous</button>
pag. {{ currentPage$ | async }}
<button (click)="goToNextPage()">Next</button>
`,
})
export class App {
readonly firstPage = 1;
itemsPerPage = 2;
searchInput$ = new BehaviorSubject('');
currentPage$ = new BehaviorSubject(this.firstPage);
paginatedAndFilteredUsers$ = combineLatest([
this.currentPage$.pipe(distinctUntilChanged()), // trigger only when it actually changes
this.searchInput$.pipe(
distinctUntilChanged(),
map((searchText) =>
users.filter((user) =>
user.name.toLowerCase().includes(searchText.toLowerCase())
)
)
),
]).pipe(
map(([currentPage, filteredUsers]) => {
const startIndex = (currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return filteredUsers.slice(startIndex, endIndex);
})
);
searchUser(searchText: string): void {
this.searchInput$.next(searchText);
if (this.currentPage$.value > this.firstPage) {
this.currentPage$.next(this.firstPage);
}
}
goToPrevPage(): void {
this.currentPage$.next(Math.max(this.currentPage$.value - 1, 1));
}
goToNextPage(): void {
this.currentPage$.next(
Math.min(this.currentPage$.value + 1, this.itemsPerPage + 1)
);
}
}
Search & Pagination (Signals)
Exactly the same implementation but done with Signals.
const users = [
{ id: 1, name: 'Spiderman' },
{ id: 2, name: 'Hulk' },
{ id: 3, name: 'Wolverine' },
{ id: 4, name: 'Cyclops' },
{ id: 5, name: 'Venom' },
];
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<input [ngModel]="searchInput()" (ngModelChange)="searchUser($event)" placeholder="Search">
<ul>
<li *ngFor="let user of paginatedAndFilteredUsers()">{{ user.name }}</li>
</ul>
<button (click)="goToPrevPage()">Previous</button>
pag. {{ currentPage() }}
<button (click)="goToNextPage()">Next</button>
`,
})
export class App {
readonly firstPage = 1;
itemsPerPage = 2;
searchInput = signal('');
currentPage = signal(this.firstPage);
paginatedAndFilteredUsers = computed(() => {
const startIndex = (this.currentPage() - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return users
.filter((user) =>
user.name.toLowerCase().includes(this.searchInput().toLowerCase())
)
.slice(startIndex, endIndex);
});
searchUser(searchText: string): void {
this.searchInput.set(searchText);
if (this.currentPage() > this.firstPage) {
this.currentPage.set(this.firstPage);
}
}
goToPrevPage(): void {
this.currentPage.update((currentPage) => Math.max(currentPage - 1, 1));
}
goToNextPage(): void {
this.currentPage.update((currentPage) =>
Math.min(currentPage + 1, this.itemsPerPage + 1)
);
}
}
Now comparison one by one
//RxJs
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<input [ngModel]="searchInput$ | async" (ngModelChange)="searchUser($event)" placeholder="Search">
<ul>
<li *ngFor="let user of paginatedAndFilteredUsers$ | async">{{ user.name }}</li>
</ul>
<button (click)="goToPrevPage()">Previous</button>
pag. {{ currentPage$ | async }}
<button (click)="goToNextPage()">Next</button>
`,
})
// Signals
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<input [ngModel]="searchInput()" (ngModelChange)="searchUser($event)" placeholder="Search">
<ul>
<li *ngFor="let user of paginatedAndFilteredUsers()">{{ user.name }}</li>
</ul>
<button (click)="goToPrevPage()">Previous</button>
pag. {{ currentPage() }}
<button (click)="goToNextPage()">Next</button>
`,
})
//RxJS
readonly firstPage = 1;
itemsPerPage = 2;
searchInput$ = new BehaviorSubject('');
currentPage$ = new BehaviorSubject(this.firstPage);
paginatedAndFilteredUsers$ = combineLatest([
this.currentPage$.pipe(distinctUntilChanged()),
this.searchInput$.pipe(
distinctUntilChanged(),
map((searchText) =>
users.filter((user) =>
user.name.toLowerCase().includes(searchText.toLowerCase())
)
)
),
]).pipe(
map(([currentPage, filteredUsers]) => {
const startIndex = (currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return filteredUsers.slice(startIndex, endIndex);
})
);
//Signals
readonly firstPage = 1;
itemsPerPage = 2;
searchInput = signal('');
currentPage = signal(this.firstPage);
paginatedAndFilteredUsers = computed(() => {
const startIndex = (this.currentPage() - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return users
.filter((user) =>
user.name.toLowerCase().includes(this.searchInput().toLowerCase())
)
.slice(startIndex, endIndex);
});
//RxJS
searchUser(searchText: string): void {
this.searchInput$.next(searchText);
if (this.currentPage$.value > this.firstPage) {
this.currentPage$.next(this.firstPage);
}
}
//Signals
searchUser(searchText: string): void {
this.searchInput.set(searchText);
if (this.currentPage() > this.firstPage) {
this.currentPage.set(this.firstPage);
}
}//RxJS
goToPrevPage(): void {
this.currentPage$.next(Math.max(this.currentPage$.value - 1, 1));
}
goToNextPage(): void {
this.currentPage$.next(
Math.min(this.currentPage$.value + 1, this.itemsPerPage + 1)
);
}
//Signals
goToPrevPage(): void {
this.currentPage.update((currentPage) => Math.max(currentPage - 1, 1));
}
goToNextPage(): void {
this.currentPage.update((currentPage) =>
Math.min(currentPage + 1, this.itemsPerPage + 1)
);
}Conclusion
Please remember that currently, Signals are in developer preview only! However, they are here to stay — and I have to say I love how they replace and simplify code initially written with synchronous RxJS in mind.
Disclaimer
If you are reading this in 2024 it means — I haven’t updated this content. You should find me and tell me how badly I behaved. The example here is based on the initial developer preview of Signals available in Angular 16 on its release date.
This is going to change once the full vision of Signals is available. If you tracked RFCs and proposals — you might immediately think that the example presented would work differently with input-based signals that are still not available to use.
I hope you liked my article!
If you did you might also like what I am doing on Twitter. I am hosting live Twitter Spaces about Angular with GDEs & industry experts! You can participate live, ask your questions or watch replays in a form of short clips :)
If you are interested drop me a follow on Twitter @DanielGlejzner — would mean a lot :). Thank You!
