diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts index 955454e523da..846f89563dbd 100644 --- a/src/lib/button/button.spec.ts +++ b/src/lib/button/button.spec.ts @@ -1,7 +1,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MatButtonModule} from './index'; +import {MatButtonModule, MatButton} from './index'; import {MatRipple} from '@angular/material/core'; @@ -41,6 +41,13 @@ describe('MatButton', () => { expect(aDebugElement.nativeElement.classList).not.toContain('mat-accent'); }); + it('should expose the ripple instance', () => { + const fixture = TestBed.createComponent(TestApp); + const button = fixture.debugElement.query(By.css('button')).componentInstance as MatButton; + + expect(button.ripple).toBeTruthy(); + }); + it('should should not clear previous defined classes', () => { let fixture = TestBed.createComponent(TestApp); let testComponent = fixture.debugElement.componentInstance; diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index 537b4652b1c3..b68b417c3c97 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -14,12 +14,14 @@ import { Directive, ElementRef, OnDestroy, + ViewChild, ViewEncapsulation, } from '@angular/core'; import { CanColor, CanDisable, CanDisableRipple, + MatRipple, mixinColor, mixinDisabled, mixinDisableRipple @@ -118,6 +120,9 @@ export class MatButton extends _MatButtonMixinBase /** Whether the button is icon button. */ _isIconButton: boolean = this._hasHostAttributes('mat-icon-button'); + /** Reference to the MatRipple instance of the button. */ + @ViewChild(MatRipple) ripple: MatRipple; + constructor(elementRef: ElementRef, private _platform: Platform, private _focusMonitor: FocusMonitor) {