Skip to content

Commit 3feac81

Browse files
crisbetojelbourn
authored andcommitted
chore(button-toggle): switch to OnPush change detection
* Switches the button toggle component to OnPush change detection. * Fixes an issue where some toggles wouldn't be unselected when moving between toggles. * Relates to #5035.
1 parent a34787d commit 3feac81

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

src/lib/button-toggle/button-toggle.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
ViewEncapsulation,
2525
forwardRef,
2626
AfterViewInit,
27+
ChangeDetectionStrategy,
28+
ChangeDetectorRef,
2729
} from '@angular/core';
2830
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
2931
import {UniqueSelectionDispatcher, coerceBooleanProperty, FocusOriginMonitor} from '../core';
@@ -268,6 +270,7 @@ export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase
268270
templateUrl: 'button-toggle.html',
269271
styleUrls: ['button-toggle.css'],
270272
encapsulation: ViewEncapsulation.None,
273+
changeDetection: ChangeDetectionStrategy.OnPush,
271274
host: {
272275
'[class.mat-button-toggle-standalone]': '!buttonToggleGroup && !buttonToggleGroupMultiple',
273276
'class': 'mat-button-toggle'
@@ -322,11 +325,10 @@ export class MdButtonToggle implements OnInit, OnDestroy {
322325
}
323326

324327
set checked(newCheckedState: boolean) {
325-
if (this._isSingleSelector) {
326-
if (newCheckedState) {
327-
// Notify all button toggles with the same name (in the same group) to un-check.
328-
this._buttonToggleDispatcher.notify(this.id, this.name);
329-
}
328+
if (this._isSingleSelector && newCheckedState) {
329+
// Notify all button toggles with the same name (in the same group) to un-check.
330+
this._buttonToggleDispatcher.notify(this.id, this.name);
331+
this._changeDetectorRef.markForCheck();
330332
}
331333

332334
this._checked = newCheckedState;
@@ -368,19 +370,21 @@ export class MdButtonToggle implements OnInit, OnDestroy {
368370

369371
constructor(@Optional() toggleGroup: MdButtonToggleGroup,
370372
@Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
373+
private _changeDetectorRef: ChangeDetectorRef,
371374
private _buttonToggleDispatcher: UniqueSelectionDispatcher,
372375
private _renderer: Renderer2,
373376
private _elementRef: ElementRef,
374377
private _focusOriginMonitor: FocusOriginMonitor) {
375-
this.buttonToggleGroup = toggleGroup;
376378

379+
this.buttonToggleGroup = toggleGroup;
377380
this.buttonToggleGroupMultiple = toggleGroupMultiple;
378381

379382
if (this.buttonToggleGroup) {
380383
this._removeUniqueSelectionListener =
381384
_buttonToggleDispatcher.listen((id: string, name: string) => {
382385
if (id != this.id && name == this.name) {
383386
this.checked = false;
387+
this._changeDetectorRef.markForCheck();
384388
}
385389
});
386390

0 commit comments

Comments
 (0)