true false value directive

src/angular/directives/true-false-value.directive.ts

@@ -0,0 +1,54 @@
+import {
+    Directive,
+    ElementRef,
+    forwardRef,
+    HostListener,
+    Input,
+    Renderer2,
+} from '@angular/core';
+import {
+    ControlValueAccessor,
+    NG_VALUE_ACCESSOR,
+    NgControl,
+} from '@angular/forms';
+
+// ref: https://juristr.com/blog/2018/02/ng-true-value-directive/
+@Directive({
+    selector: 'input[type=checkbox][appTrueFalseValue]',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TrueFalseValueDirective),
+            multi: true,
+        },
+    ],
+})
+export class TrueFalseValueDirective implements ControlValueAccessor {
+    @Input() trueValue = true;
+    @Input() falseValue = false;
+
+    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
+
+    @HostListener('change', ['$event'])
+    onHostChange(ev: any) {
+        this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
+    }
+
+    writeValue(obj: any): void {
+        if (obj === this.trueValue) {
+            this.renderer.setProperty(this.elementRef.nativeElement, 'checked', true);
+        } else {
+            this.renderer.setProperty(this.elementRef.nativeElement, 'checked', false);
+        }
+    }
+
+    registerOnChange(fn: any): void {
+        this.propagateChange = fn;
+    }
+
+    registerOnTouched(fn: any): void { /* nothing */ }
+
+    setDisabledState?(isDisabled: boolean): void { /* nothing */ }
+
+    private propagateChange = (_: any) => { /* nothing */ };
+}