fix(button): should work within onPush components (#2038)

fixes #1689

src/buttons/button-radio.directive.ts

@@ -1,77 +1,78 @@
 import {
-    Directive, ElementRef, HostBinding, forwardRef, HostListener, Input, OnInit
+  Directive, ElementRef, HostBinding, forwardRef, HostListener, Input, OnInit, ChangeDetectorRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const RADIO_CONTROL_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => ButtonRadioDirective),
-    multi: true
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ButtonRadioDirective),
+  multi: true
 };
 
 /**
  * Create radio buttons or groups of buttons.
  * A value of a selected button is bound to a variable specified via ngModel.
  */
-@Directive({ selector: '[btnRadio]', providers: [RADIO_CONTROL_VALUE_ACCESSOR] })
+@Directive({selector: '[btnRadio]', providers: [RADIO_CONTROL_VALUE_ACCESSOR]})
 export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
 
-    public onChange:any = Function.prototype;
-    public onTouched:any = Function.prototype;
+  public onChange: any = Function.prototype;
+  public onTouched: any = Function.prototype;
 
-    /** Radio button value, will be set to `ngModel` */
-    @Input() public btnRadio:any;
-    /** If `true` — radio button can be unchecked */
-    @Input() public uncheckable:boolean;
-    /** Current value of radio component or group */
-    @Input() public value:any;
+  /** Radio button value, will be set to `ngModel` */
+  @Input() public btnRadio: any;
+  /** If `true` — radio button can be unchecked */
+  @Input() public uncheckable: boolean;
+  /** Current value of radio component or group */
+  @Input() public value: any;
 
-    protected el: ElementRef;
+  protected el: ElementRef;
 
-    @HostBinding('class.active')
-    public get isActive(): boolean {
-        return this.btnRadio === this.value;
-    }
-
-    @HostListener('click')
-    public onClick(): void {
-        if (this.el.nativeElement.attributes.disabled) {
-            return;
-        }
-
-        if (this.uncheckable && this.btnRadio === this.value) {
-            this.value = undefined;
-        } else {
-            this.value = this.btnRadio;
-        }
+  @HostBinding('class.active')
+  public get isActive(): boolean {
+    return this.btnRadio === this.value;
+  }
 
-        this.onTouched();
-        this.onChange(this.value);
+  @HostListener('click')
+  public onClick(): void {
+    if (this.el.nativeElement.attributes.disabled) {
+      return;
     }
 
-    public constructor(el: ElementRef) {
-      this.el = el;
+    if (this.uncheckable && this.btnRadio === this.value) {
+      this.value = undefined;
+    } else {
+      this.value = this.btnRadio;
     }
 
-    public ngOnInit(): void {
-        this.uncheckable = typeof this.uncheckable !== 'undefined';
-    }
+    this.onTouched();
+    this.onChange(this.value);
+  }
 
-    public onBlur(): void {
-        this.onTouched();
-    }
+  public constructor(el: ElementRef, private cdr: ChangeDetectorRef) {
+    this.el = el;
+  }
 
-    // ControlValueAccessor
-    // model -> view
-    public writeValue(value: any): void {
-        this.value = value;
-    }
+  public ngOnInit(): void {
+    this.uncheckable = typeof this.uncheckable !== 'undefined';
+  }
 
-    public registerOnChange(fn: any): void {
-        this.onChange = fn;
-    }
+  public onBlur(): void {
+    this.onTouched();
+  }
 
-    public registerOnTouched(fn: any): void {
-        this.onTouched = fn;
-    }
+  // ControlValueAccessor
+  // model -> view
+  public writeValue(value: any): void {
+    this.value = value;
+    this.cdr.markForCheck();
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
 }