Make MdRadioButton OnPush

Author: tinayuangao

src/lib/radio/radio.ts

@@ -1,5 +1,7 @@
 import {
   AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChildren,
   Directive,
@@ -126,14 +128,31 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor {
   }
 
   /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
-  @Input() labelPosition: 'before' | 'after' = 'after';
+  _labelPosition: 'before' | 'after' = 'after';
+  @Input()
+  get labelPosition(): 'before' | 'after' {
+    return this._labelPosition;
+  }
+  set labelPosition(v: 'before' | 'after') {
+    this._labelPosition = v
+    if (this._radios) {
+      this._radios.forEach((radio) => {
+        radio.labelPosition = this._labelPosition;
+      });
+    }
+  }
 
   /** Whether the radio button is disabled. */
   @Input()
   get disabled(): boolean { return this._disabled; }
   set disabled(value) {
     // The presence of *any* disabled value makes the component disabled, *except* for false.
     this._disabled = (value != null && value !== false) ? true : null;
+    if (this._radios) {
+      this._radios.forEach((radio) => {
+        radio.disabled = this._disabled;
+      })
+    }
   }
 
   /** Value of the radio button. */
@@ -269,6 +288,7 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor {
     '[class.mat-radio-disabled]': 'disabled',
     '[attr.id]': 'id',
   }
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
 
@@ -279,15 +299,67 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
   @Input() name: string;
 
   /** Used to set the 'aria-label' attribute on the underlying input element. */
-  @Input('aria-label') ariaLabel: string;
+  _ariaLabel: string;
+  @Input('aria-label')
+  get ariaLabel(): string {
+    return this._ariaLabel;
+  }
+  set ariaLabel(value: string) {
+    this._ariaLabel = value;
+    this._change.markForCheck();
+  }
 
   /** The 'aria-labelledby' attribute takes precedence as the element's text alternative. */
-  @Input('aria-labelledby') ariaLabelledby: string;
+  _ariaLabelledby: string;
+  @Input('aria-labelledby')
+  get ariaLabelledby(): string {
+    return this._ariaLabelledby;
+  }
+  set ariaLabelledby(value: string) {
+    this._ariaLabelledby = value;
+    this._change.markForCheck();
+  }
 
   /** Whether the ripple effect for this radio button is disabled. */
   @Input()
   get disableRipple(): boolean { return this._disableRipple; }
-  set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }
+  set disableRipple(value) {
+    this._disableRipple = coerceBooleanProperty(value);
+    this._change.markForCheck();
+  }
+
+  /**
+   * Event emitted when the checked state of this radio button changes.
+   * Change events are only emitted when the value changes due to user interaction with
+   * the radio button (the same behavior as `<input type-"radio">`).
+   */
+  @Output()
+  change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();
+
+  /** The native `<input type=radio>` element */
+  @ViewChild('input') _inputElement: ElementRef;
+
+  constructor(@Optional() radioGroup: MdRadioGroup,
+              private _elementRef: ElementRef,
+              private _renderer: Renderer,
+              private _change: ChangeDetectorRef,
+              public radioDispatcher: UniqueSelectionDispatcher) {
+    // Assertions. Ideally these should be stripped out by the compiler.
+    // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
+
+    this.radioGroup = radioGroup;
+
+    radioDispatcher.listen((id: string, name: string) => {
+      if (id != this.id && name == this.name) {
+        this.checked = false;
+      }
+    });
+  }
+
+  /** ID of the native input element inside `<md-radio-button>` */
+  get inputId(): string {
+    return `${this.id}-input`;
+  }
 
   /** Whether this radio button is checked. */
   @Input()
@@ -311,6 +383,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
         // Notify all radio buttons with the same name to un-check.
         this._radioDispatcher.notify(this.id, this.name);
       }
+      this._change.markForCheck();
     }
   }
 
@@ -332,7 +405,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
           this.radioGroup.selected = this;
         }
       }
-
+      this._change.markForCheck();
     }
   }
 
@@ -349,6 +422,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
 
   set align(v) {
     this.labelPosition = (v == 'start') ? 'after' : 'before';
+    this._change.markForCheck();
   }
 
   private _labelPosition: 'before' | 'after';
@@ -361,6 +435,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
 
   set labelPosition(value) {
     this._labelPosition = value;
+    this._change.markForCheck();
   }
 
   /** Whether the radio button is disabled. */
@@ -372,6 +447,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
   set disabled(value: boolean) {
     // The presence of *any* disabled value makes the component disabled, *except* for false.
     this._disabled = (value != null && value !== false) ? true : null;
+    this._change.markForCheck();
   }
 
   /**