Which approach correctly implements this behavior?
hard📝 component behavior Q15 of 15
Angular - Signals
You want to create a component that receives a reactive input signal userName and also maintains a local model signal greeting that updates automatically when userName changes. Which approach correctly implements this behavior?
AUse <code>@Input() userName: string;</code> and create <code>greeting = signal('');</code> updated by a setter
BUse <code>@Input() userName = signal('');</code> and update <code>greeting</code> manually in <code>ngOnChanges</code>
CUse <code>@Input() userName = signal('');</code> and inside the component create <code>greeting = computed(() => `Hello, ${this.userName()}`);</code>
DUse <code>@Input() userName = signal('');</code> and assign <code>greeting = signal('Hello');</code> once in constructor
Step-by-Step Solution
Solution:
Step 1: Understand reactive input and model signals
The input signal userName provides reactive data from parent. The local greeting should react automatically to changes.
Step 2: Use computed signal for automatic updates
Using computed creates a signal that updates whenever userName() changes, keeping greeting in sync.
Final Answer:
Use @Input() userName = signal(''); and greeting = computed(() => `Hello, ${this.userName()}`); -> Option C
Quick Check:
Computed signals auto-update from input signals [OK]
Quick Trick:Use computed() for dependent reactive signals [OK]
Common Mistakes:
Manually updating signals instead of computed
Using plain string input instead of signal
Assigning greeting only once without reactivity
Master "Signals" in Angular
9 interactive learning modes - each teaches the same concept differently
