Signals là gì? Tìm hiểu Signals trong Angular 16+

Signals là một tính năng mới được giới thiệu trong Angular 16, mang đến cách tiếp cận hiện đại và đơn giản hơn để xử lý dữ liệu phản ứng (reactive data).

Thay vì phụ thuộc vào các stream phức tạp của RxJS, Signals cho phép bạn khai báo các giá trị có thể theo dõi và tự động cập nhật giao diện người dùng mỗi khi giá trị thay đổi.

Với cú pháp ngắn gọn, hiệu năng tối ưu và dễ dàng tích hợp vào component, Signals đang mở ra một hướng đi mới cho quản lý trạng thái trong Angular.

Angular Signals là gì?

Angular 16 đã mang đến một thay đổi đột phá với Signals, mở ra một hướng tiếp cận mới cho quản lý trạng thái phản ứng (reactive state) trong ứng dụng. Signals giúp đơn giản hóa việc quản lý dữ liệu thay đổi theo thời gian mà không cần dựa nhiều vào RxJS như trước đây.

Nói một cách dễ hiểu, Signal là một đối tượng đại diện cho một giá trị có thể thay đổi theo thời gian, và bất kỳ thành phần nào phụ thuộc vào Signal đó sẽ tự động cập nhật khi giá trị thay đổi.

Ví dụ nhanh:

import { signal } from '@angular/core';

const counter = signal(0);

console.log(counter()); // 0
counter.set(1);
console.log(counter()); // 1

Tại sao Signals ra đời?

Trong nhiều năm, Angular phụ thuộc vào RxJS để xử lý lập trình phản ứng. Tuy nhiên, việc sử dụng RxJS đôi khi khiến code phức tạp, đặc biệt với những người mới bắt đầu.

Signals ra đời nhằm mục tiêu:

• Đơn giản hóa cách theo dõi sự thay đổi của dữ liệu.
• Tối ưu hiệu năng bằng cách thu hẹp lại phạm vi cập nhật.
• Cung cấp khả năng phản ứng tự động (reactive) mà không cần subscription thủ công.

So sánh Signals và RxJS

Ví dụ:

Signal

const name = signal('Angular');
effect(() => {
  console.log(`Hello, ${name()}`);
});
name.set('NgDev'); // Tự động in: Hello, NgDev

RxJS

const name$ = new BehaviorSubject('Angular');
name$.subscribe(val => {
  console.log(`Hello, ${val}`);
});
name$.next('NgDev'); // Tự động in: Hello, NgDev

Khi nào nên dùng Signals thay vì RxJS?

Nên dùng Signals khi:

• Bạn xây dựng UI tương tác đơn giản
• Cần binding trạng thái đơn giản và trực quan
• Muốn tránh boilerplate code (subscribe, unsubscribe)

Tiếp tục dùng RxJS khi:

• Xử lý luồng dữ liệu bất đồng bộ phức tạp
• Cần debounce, retry, delay, combine, merge…
• Làm việc với HTTP, WebSocket, hoặc Streams

Thực tế: Signals và RxJS không loại trừ nhau, mà có thể kết hợp hiệu quả tùy từng tình huống cụ thể.

Kết luận

Signals mang đến một luồng gió mới trong cách lập trình phản ứng với Angular. Chúng đơn giản, rõ ràng và giúp code gọn hơn nhiều khi xử lý trạng thái UI. Tuy nhiên, bạn không nên vội vàng thay thế hoàn toàn RxJS, mà hãy kết hợp cả hai để phát huy tối đa điểm mạnh của từng công cụ.