Custom Checkbox Component with Angular

February 2021

Your first guess when creating a custom checkbox component might be to just create a div with something inside. But this approach has several drawbacks:

This is where the Angular Control Value Accessor (CVA) comes into play. If you implement this interface, you teach Angular how to access “the” value associated with the component and thus enabling ngModel. There’s a full article at Angular Control Value Accessor Tutorial. Here we’re not explaining in detail how CVA is working, but instead we’ll just show you how to implement a custom checkbox right away:

<label class="checkbox-container">
  <div class="checkbox-border">
    <div class="checkbox-filling" *ngIf="checked"></div>
  <ng-content> </ng-content>
import { Component, OnInit, forwardRef } from "@angular/core";
import {
} from "@angular/forms";

  selector: "app-custom-checkbox",
  templateUrl: "./custom-checkbox.component.html",
  styleUrls: ["./custom-checkbox.component.scss"],

  // Step 1: copy paste this providers property
  providers: [
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomCheckboxComponent),
      multi: true
// Step 2: Add "implements ControlValueAccessor"
export class CustomCheckboxComponent implements ControlValueAccessor, OnInit {
  // Step 3: Copy paste this stuff here
  onChange: any = () => {};
  onTouch: any = () => {};

  registerOnChange(fn: any): void {
    this.onChange = fn;

  registerOnTouched(fn: any): void {
    this.onTouch = fn;

  constructor() {}

  ngOnInit() {}

  // Step 4: Define what should happen in this component, if something changes outside
  checked: boolean = false;
  writeValue(checked: boolean) {
    this.checked = checked;

  onModelChange(e: boolean) {
    // Step 5a: bind the changes to the local value
    this.checked = e;

    // Step 5b: Handle what should happen on the outside, if something changes on the inside

Here’s the code on Stackblitz for the custom checkbox with angular.

And here’s what you’ll get:

Dear Devs: You can help Ukraine🇺🇦. I opted for (a) this message and (b) a geo targeted message to Russians coming to this page. If you have a blog, you could do something similar, or you can link to a donations page. If you don't have one, you could think about launching a page with uncensored news and spread it on Russian forums or even Google Review. Or hack some russian servers. Get creative. #StandWithUkraine 🇺🇦
Dear russians🇷🇺. I am a peace loving person from Switzerland🇨🇭. It is without a doubt in my mind, that your president, Vladimir Putin, has started a war that causes death and suffering for Ukrainians🇺🇦 and Russians🇷🇺. Your media is full of lies. Lies about the casualties, about the intentions, about the "Nazi Regime" in Ukraine. Please help to mobilize your people against your leader. I know it's dangerous for you, but it must be done!