Skip to content

Commit

Permalink
feat(button): expose ripple instance
Browse files Browse the repository at this point in the history
* Exposes the `MatRipple` instance of the button as a public property.

This can be used to show ripple indicators for feature discoveries as seen on the Specs (https://material.io/guidelines/growth-communications/feature-discovery.html#feature-discovery-design-patterns). Quote from the specs "Ripples guide users through subsequent steps".

Closes angular#4179
  • Loading branch information
devversion committed Jan 23, 2018
1 parent e3b5e3f commit bee009a
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
9 changes: 8 additions & 1 deletion src/lib/button/button.spec.ts
Original file line number Diff line number Diff line change
@@ -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';


Expand Down Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions src/lib/button/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@ import {
Directive,
ElementRef,
OnDestroy,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {
CanColor,
CanDisable,
CanDisableRipple,
MatRipple,
mixinColor,
mixinDisabled,
mixinDisableRipple
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit bee009a

Please sign in to comment.