1
1
import {
2
2
AfterContentInit ,
3
+ ChangeDetectionStrategy ,
4
+ ChangeDetectorRef ,
3
5
Component ,
4
6
ContentChildren ,
5
7
Directive ,
@@ -86,6 +88,12 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
86
88
/** Whether the `value` has been set to its initial value. */
87
89
private _isInitialized : boolean = false ;
88
90
91
+ /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
92
+ private _labelPosition : 'before' | 'after' = 'after' ;
93
+
94
+ /** Whether the radio group is disabled. */
95
+ private _disabled : boolean = false ;
96
+
89
97
/** The method to be called in order to update ngModel */
90
98
_controlValueAccessorChangeFn : ( value : any ) => void = ( value ) => { } ;
91
99
@@ -129,8 +137,17 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
129
137
this . labelPosition = ( v == 'start' ) ? 'after' : 'before' ;
130
138
}
131
139
140
+
132
141
/** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
133
- @Input ( ) labelPosition : 'before' | 'after' = 'after' ;
142
+ @Input ( )
143
+ get labelPosition ( ) {
144
+ return this . _labelPosition ;
145
+ }
146
+
147
+ set labelPosition ( v ) {
148
+ this . _labelPosition = ( v == 'before' ) ? 'before' : 'after' ;
149
+ this . _markRadiosForCheck ( ) ;
150
+ }
134
151
135
152
/** Value of the radio button. */
136
153
@Input ( )
@@ -160,6 +177,18 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
160
177
this . _checkSelectedRadioButton ( ) ;
161
178
}
162
179
180
+ /** Whether the radio group is diabled */
181
+ @Input ( )
182
+ get disabled ( ) { return this . _disabled ; }
183
+ set disabled ( value ) {
184
+ this . _disabled = value ;
185
+ this . _markRadiosForCheck ( ) ;
186
+ }
187
+
188
+ constructor ( private _changeDetector : ChangeDetectorRef ) {
189
+ super ( ) ;
190
+ }
191
+
163
192
/**
164
193
* Initialize properties once content children are available.
165
194
* This allows us to propagate relevant attributes to associated buttons.
@@ -215,12 +244,19 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
215
244
}
216
245
}
217
246
247
+ _markRadiosForCheck ( ) {
248
+ if ( this . _radios ) {
249
+ this . _radios . forEach ( radio => radio . _markForCheck ( ) ) ;
250
+ }
251
+ }
252
+
218
253
/**
219
254
* Sets the model value. Implemented as part of ControlValueAccessor.
220
255
* @param value
221
256
*/
222
257
writeValue ( value : any ) {
223
258
this . value = value ;
259
+ this . _changeDetector . markForCheck ( ) ;
224
260
}
225
261
226
262
/**
@@ -247,6 +283,7 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
247
283
*/
248
284
setDisabledState ( isDisabled : boolean ) {
249
285
this . disabled = isDisabled ;
286
+ this . _changeDetector . markForCheck ( ) ;
250
287
}
251
288
}
252
289
@@ -264,7 +301,8 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
264
301
'[class.mat-radio-checked]' : 'checked' ,
265
302
'[class.mat-radio-disabled]' : 'disabled' ,
266
303
'[attr.id]' : 'id' ,
267
- }
304
+ } ,
305
+ changeDetection : ChangeDetectionStrategy . OnPush ,
268
306
} )
269
307
export class MdRadioButton implements OnInit , AfterViewInit , OnDestroy {
270
308
@@ -307,6 +345,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
307
345
// Notify all radio buttons with the same name to un-check.
308
346
this . _radioDispatcher . notify ( this . id , this . name ) ;
309
347
}
348
+ this . _changeDetector . markForCheck ( ) ;
310
349
}
311
350
}
312
351
@@ -328,7 +367,6 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
328
367
this . radioGroup . selected = this ;
329
368
}
330
369
}
331
-
332
370
}
333
371
}
334
372
@@ -364,7 +402,6 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
364
402
get disabled ( ) : boolean {
365
403
return this . _disabled || ( this . radioGroup != null && this . radioGroup . disabled ) ;
366
404
}
367
-
368
405
set disabled ( value : boolean ) {
369
406
this . _disabled = coerceBooleanProperty ( value ) ;
370
407
}
@@ -408,6 +445,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
408
445
constructor ( @Optional ( ) radioGroup : MdRadioGroup ,
409
446
private _elementRef : ElementRef ,
410
447
private _renderer : Renderer2 ,
448
+ private _changeDetector : ChangeDetectorRef ,
411
449
private _focusOriginMonitor : FocusOriginMonitor ,
412
450
private _radioDispatcher : UniqueSelectionDispatcher ) {
413
451
// Assertions. Ideally these should be stripped out by the compiler.
@@ -427,6 +465,17 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
427
465
this . _focusOriginMonitor . focusVia ( this . _inputElement . nativeElement , this . _renderer , 'keyboard' ) ;
428
466
}
429
467
468
+ /**
469
+ * Marks the radio button as needing checking for change detection.
470
+ * This method is exposed because the parent radio group will directly
471
+ * update bound properties of the radio button.
472
+ */
473
+ _markForCheck ( ) {
474
+ // When group value changes, the button will not be notified. Use `markForCheck` to explicit
475
+ // update radio button's status
476
+ this . _changeDetector . markForCheck ( ) ;
477
+ }
478
+
430
479
ngOnInit ( ) {
431
480
if ( this . radioGroup ) {
432
481
// If the radio is inside a radio group, determine if it should be checked
0 commit comments