From a0f468033043ec5de7ef6f71d2253e093ed93027 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sun, 31 Dec 2017 11:53:48 +0100 Subject: [PATCH] feat(checkbox): expose ripple instance * Exposes the reference to the `MatRipple` directive publically. --- 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 b03514d6b122..c22c8d823939 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -80,6 +80,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 b439f4abc270..2e342427ab9f 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -178,8 +178,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}; @@ -346,7 +346,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();