5 questions found
What is a signal in Angular and how does it help manage a component's data?
Beginner
A signal is a wrapper around a value that notifies Angular exactly when that value changes, letting Angular update only the specific parts of the page that actually depend on it. You create a signal using the signal function, read its current value by calling it like a function, and update it using its set or update methods.
import { signal } from '@angular/core';
@Component({
selector: 'app-counter',
template: `<button (click)="increment()">Count: {{ count() }}</button>`
})
export class CounterComponent {
count = signal(0);
increment() { this.count.update((value) => value + 1); }
}
Real-world example
A counter component displays and updates its count using a signal, and Angular automatically knows exactly when to refresh just that piece of text on the screen, without needing to check the entire component for changes.
Common follow-ups: How is reading a signal's value, using count with parentheses, different from reading a regular property?;What is the difference between the set method and the update method on a signal?
Change Detection;Zoneless Change Detection & Zone.js
What is a computed signal, and how does it automatically stay in sync with the signals it depends on?
Intermediate
A computed signal derives its value from one or more other signals, and Angular automatically tracks which signals it reads, recalculating the computed value only when one of those dependencies actually changes, without you needing to manually specify a list of dependencies.
import { signal, computed } from '@angular/core';
firstName = signal('John');
lastName = signal('Smith');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
Real-world example
A user profile component automatically keeps a displayed full name in sync using a computed signal, so updating either the first name or last name signal instantly recalculates the correct combined value without any extra code.
Common follow-ups: What happens if a computed signal's calculation is expensive, does it recompute every single time it is read?;Can a computed signal depend on another computed signal?
State Management;RxJS & Observables
How do you use the effect function with signals to run code whenever a signal's value changes?
Intermediate
The effect function lets you run a piece of code automatically whenever any signal it reads inside changes, similar to how a computed signal works, but instead of producing a new value, it performs a side effect, such as logging a value or saving data to local storage.
import { signal, effect } from '@angular/core';
count = signal(0);
constructor() {
effect(() => {
console.log('Count changed to', this.count());
});
}
Real-world example
A settings component automatically saves a user's theme preference to local storage every time the underlying theme signal changes, using an effect to react to that change without needing a separate manual save button.
Common follow-ups: When does an effect actually run for the first time after being created?;What is the risk of updating a signal from inside an effect that also reads that same signal?
Services & Dependency Injection;Change Detection
How do signal inputs work in modern Angular components, and how are they different from the traditional Input decorator?
Advanced
Signal inputs let a component receive data from its parent as a signal instead of a plain property, using the input function. This means the component can react to changes just like any other signal, and combine input values with computed signals easily, all while Angular tracks exactly when the value actually changes.
import { input, computed } from '@angular/core';
@Component({
selector: 'app-price-tag',
template: `<p>{{ formattedPrice() }}</p>`
})
export class PriceTagComponent {
price = input.required<number>();
formattedPrice = computed(() => `$${this.price().toFixed(2)}`);
}
Real-world example
A price tag component receives its price as a signal input from its parent, and automatically keeps a formatted display in sync using a computed signal, without needing a separate ngOnChanges lifecycle hook to detect the change.
Common follow-ups: What does the required option on a signal input actually enforce?;How would you provide a default value for an optional signal input?
Components & Templates;Data Binding
Why did Angular introduce signals, given that RxJS observables already existed for managing changing values?
Beginner
Signals provide a simpler way to manage values that change over time for many common cases, without needing to understand the broader concepts of RxJS, like subscribing and unsubscribing. Signals also let Angular track dependencies precisely, opening the door to more efficient change detection that only checks the exact parts of the page that actually changed.
// Signal, simple to read and update directly
count = signal(0);
this.count.set(5);
// Observable, more powerful but requires more setup for a similar simple case
count$ = new BehaviorSubject(0);
this.count$.next(5);
Real-world example
A team switches several simple pieces of component state from RxJS BehaviorSubjects to signals, finding the resulting code noticeably shorter and easier for newer team members to understand, while keeping RxJS for genuinely complex asynchronous data streams.
Common follow-ups: When should you still choose an observable over a signal for a specific piece of data?;How do signals and observables work together in the same Angular app?
RxJS & Observables;Zoneless Change Detection & Zone.js