Signals - Interview Question

1. What are Signals in Angular?

Signals are reactive containers that hold values and automatically notify Angular when those values change. They help manage component state and UI updates.

count = signal(0);

2. Why were Signals introduced?

Signals were introduced to provide fine-grained reactivity, simplify state management, and improve change detection efficiency. They also support Angular's zoneless change detection.

3. What is signal()?

signal() creates a writable signal that stores a reactive value. Its value can be changed using set() or update().

count = signal<number>(0);

4. How do you read and update a signal?

Read a signal by calling it as a function: count(). Update it using set() for replacement or update() for modification based on its current value.

console.log(this.count()); this.count.set(10);
this.count.update(value => value + 1);

5. What is computed()?

computed() creates a read-only derived signal based on other signals. It automatically recalculates when its dependencies change and caches its result.

price = signal(100); quantity = signal(2);
total = computed(() => this.price() * this.quantity());

6. What is effect()?

effect() executes a function when the signals it reads change. It is mainly used for side effects such as logging or synchronization with external APIs.

count = signal(0);
constructor() { effect(() => console.log(this.count())); }

7. What is linkedSignal()?

linkedSignal() creates a writable signal linked to another reactive value. It automatically updates when its source changes but also allows manual updates.

options = signal(['A', 'B']);
selected = linkedSignal(() => this.options()[0]);

8. What is the difference between Signals and Observables?

9. When should you use Signals?

Use Signals for component state, counters, selected filters, form-related UI state, and computed values. They are ideal when the UI must react automatically to state changes.

selectedCategory = signal('All');
isLoading = signal(false);

10. When should you use RxJS?

Use RxJS for HTTP requests, event streams, debouncing, cancellation, and complex asynchronous workflows. Operators such as switchMap() and forkJoin() simplify async operations.

this.http.get<User[]>('/api/users').subscribe(users => console.log(users));

11. Can Signals and RxJS be used together?

Yes. Angular provides toSignal() to convert an Observable into a Signal and toObservable() to convert a Signal into an Observable.

users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });

12. What are signal-based inputs?

Signal-based inputs use input() instead of traditional @Input() to receive values from parent components. Input signals are read-only and support reactive computations.

userId = input<number>(0);
requiredId = input.required<number>();

13. How do Signals affect Angular change detection?

Angular automatically tracks signals read in templates and marks their consuming components for checking when values change. This supports efficient updates, including with OnPush and zoneless applications.

<p>Count: {{ count() }}</p>

Updating count causes Angular to schedule checking of the component that reads it.

Important Interview Revision Points

Most Important Differences

Interview priority: Focus particularly on questions 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, and 13.

For an Angular + ASP.NET Core Full Stack Developer interview, remember this practical distinction: Use RxJS to retrieve and process API data; use Signals to manage and display reactive UI state.