import { Directive , ElementRef , forwardRef , HostListener , Input , Renderer2 } from "@angular/core" ; import { ControlValueAccessor , NgControl , NG_VALUE_ACCESSOR } from "@angular/forms" ; @ 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 , private renderer ) { } @ HostListener ( "change" , [ "$event" ] ) onHostChange ( ev ) { this . propagateChange ( ev . target . checked ? this . trueValue : this . falseValue ) ; } writeValue ( obj ) { if ( obj === this . trueValue ) { this . renderer . setProperty ( this . elementRef . nativeElement , "checked" , true ) ; } else { this . renderer . setProperty ( this . elementRef . nativeElement , "checked" , false ) ; } } registerOnChange ( fn ) { this . propagateChange = fn ; } registerOnTouched ( fn ) { } setDisabledState ? ( isDisabled ) { } private propagateChange = ( _ ) => { } ; }