From e09c0a694de0660948d4e35369dc973d35a7c4de Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 23 Jan 2018 17:08:08 +0100 Subject: [PATCH] feat(checkbox): expose ripple instance (#9176) --- src/lib/checkbox/checkbox.spec.ts | 4 ++++ src/lib/checkbox/checkbox.ts | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index f82b27c5f32..048a3c09fdb 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -74,6 +74,10 @@ describe('MatCheckbox', () => { expect(inputElement.checked).toBe(false); }); + it('should expose the ripple instance', () => { + expect(checkboxInstance.ripple).toBeTruthy(); + }); + it('should add and remove indeterminate state', () => { expect(checkboxNativeElement.classList).not.toContain('mat-checkbox-checked'); expect(inputElement.checked).toBe(false); diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index d533a4890c7..f1bb87c8948 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -177,8 +177,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc /** The native ` element */ @ViewChild('input') _inputElement: ElementRef; - /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */ - @ViewChild(MatRipple) _ripple: MatRipple; + /** Reference to the ripple instance of the checkbox. */ + @ViewChild(MatRipple) ripple: MatRipple; /** Ripple configuration for the mouse ripples and focus indicators. */ _rippleConfig: RippleConfig = {centered: true, radius: 25, speedFactor: 1.5}; @@ -341,7 +341,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc /** Function is called whenever the focus changes for the input element. */ private _onInputFocusChange(focusOrigin: FocusOrigin) { if (!this._focusRipple && focusOrigin === 'keyboard') { - this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig}); + this._focusRipple = this.ripple.launch(0, 0, {persistent: true, ...this._rippleConfig}); } else if (!focusOrigin) { this._removeFocusRipple(); this.onTouched();