Angular Academy · Lesson

Writing and Registering Values

Implement writeValue and change callbacks.

Writing and Registering Values is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Two Core Methods

The heart of a value accessor is moving data both ways: writeValue brings the model value into your view, and the callback from registerOnChange sends user edits back to the model.

writeValue

Angular calls writeValue when the form sets or resets the control's value. Store it in your component state so the view reflects it.

value = 0;

writeValue(value: number): void {
  this.value = value ?? 0;
}

Handle Null

writeValue may receive null on reset. Normalize it to a safe default so your template does not break.

writeValue(value: string | null): void {
  this.text = value ?? '';
}

registerOnChange

Angular passes you a callback to call whenever the value changes. Save it; you will invoke it on user interaction.

private onChange: (v: number) => void = () => {};

registerOnChange(fn: (v: number) => void): void {
  this.onChange = fn;
}

Emitting Changes

When the user interacts, update internal state and call the stored onChange callback with the new value to update the form model.

select(rating: number): void {
  this.value = rating;
  this.onChange(rating);
}

Wiring The Template

The template renders current state and triggers your handler on user actions, which then calls onChange.

template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'

Keeping View In Sync

Because writeValue updates internal state and the template binds to it, programmatic form changes (like patchValue) immediately reflect in your component.

OnPush Friendly

With OnPush change detection, update state through component fields and let bindings react. If you mutate from async sources, mark for check or use signals to keep the view current.

Do Not Call onChange In writeValue

Important: never invoke onChange from inside writeValue. That would echo programmatic updates back into the model and can cause loops. onChange is only for user-driven changes.

Typing The Value

Give your control a concrete value type (number, string, a custom interface) and type the methods accordingly for safer integration with reactive forms.

export class RatingComponent implements ControlValueAccessor {
  value = 0;
  writeValue(v: number) { this.value = v ?? 0; }
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}

Result So Far

With writeValue and registerOnChange implemented, the control reads from and writes to the form model. Next you add disabled and touched handling for complete UX.

Quick Check

Check your value writing knowledge.

Recap

You implemented writeValue (model to view, handling null) and used the registerOnChange callback to emit user changes (view to model), wired the template, and learned never to call onChange from writeValue.

Frequently asked questions

Is the “Writing and Registering Values” lesson free?

Yes — the full text of “Writing and Registering Values” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Writing and Registering Values”?

Implement writeValue and change callbacks. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Writing and Registering Values” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy