import { Directive , OnInit , Input , HostBinding , HostListener , Self , ElementRef } from '@angular/core' ; import { ControlValueAccessor , NgModel } from '@angular/forms' ; @ Directive ( { selector : '[btnRadio][ngModel]' } ) export class ButtonRadio implements ControlValueAccessor , OnInit { @ Input ( ) private btnRadio : string ; @ Input ( ) private uncheckable : boolean ; @ HostBinding ( 'class.active' ) private get isActive ( ) { return this . btnRadio === this . value ; } @ HostListener ( 'click' ) private onClick ( ) { if ( this . uncheckable && this . btnRadio === this . value ) { return this . cd . viewToModelUpdate ( null ) ; } this . cd . viewToModelUpdate ( this . btnRadio ) ; } constructor ( @ Self ( ) public cd , public el ) { cd . valueAccessor = this ; } public ngOnInit ( ) { this . uncheckable = typeof this . uncheckable !== 'undefined' ; } protected get value ( ) { return this . cd . viewModel ; } protected set value ( value ) { this . cd . viewModel = value ; } public writeValue ( value ) { this . value = value ; } public onChange = ( _ ) => { } ; public onTouched = ( ) => { } ; public registerOnChange ( fn ) { this . onChange = fn ; } public registerOnTouched ( fn ) { this . onTouched = fn ; } }