NgTrueValue NgFalseValue equivalent directive in angular 2+

Code :

import {Directive, ElementRef, forwardRef, HostListener, Input, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Directive({
    selector: 'input[type=radio][trueFalseValue]',
    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) {}
    private propagateChange = (_: any) => {};

    @HostListener('change', ['$event'])
    onHostChange(ev) {
        this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
    }

    writeValue(obj: any): void {
        if (obj == null) {
            this.propagateChange(this.falseValue);
        }
        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;
        if (this.elementRef.nativeElement.value == null) {
            this.propagateChange(this.falseValue);
        }
    }

    registerOnTouched(fn: any): void {}

    setDisabledState?(isDisabled: boolean): void {}
}


How to use:

<input type="radio" name="{{someName}}" trueFalseValue
                           [(ngModel)]="radioVal"
                           [trueValue]="abc"
                           [falseValue]="xyz"/>