A value accessor connects a custom input to Angular forms through value writes, change notification, touch notification and disabled state.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: A rating input receives a form value and reports user changes without reporting programmatic writes as new edits. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Accept programmatic values
writeValue updates the control’s display without reporting that incoming write as another user edit.
Step 2: Report user interaction
Call the registered change callback for genuine edits and touch callback for the appropriate interaction boundary.
Step 3: Honor disabled state
Block keyboard and pointer edits while disabled and expose the disabled semantics accessibly without erasing the current value.
Worked scenario
A rating input receives a form value and reports user changes without reporting programmatic writes as new edits.
A rating control receives three stars through the form model and displays three without invoking the change callback. The user selects four, causing one change notification. Blurring marks it touched. Disabling it preserves four but prevents further edits; reenabling restores interaction without an unsolicited value change.
Common mistake
Calling the registered change callback during every write can create feedback loops.
Verify the behavior
Spy on callbacks across write, click, blur, disable and enable. Verify programmatic writes do not create a feedback loop.
Interview exercise
Implement disabled behavior.
Answer and reasoning
Disable interaction and expose accessible state while preserving the current value; keep touch and value-change semantics separate.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.