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 Dec 30, 2017
1 parent c3d7cd9 commit ec2c210
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
Expand Up @@ -3,7 +3,7 @@ import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {ViewportRuler} from '@angular/cdk/scrolling';
import {FakeViewportRuler} from '@angular/cdk/testing';
import {MatButtonModule} from './index';
import {MatButtonModule, MatButton} from './index';
import {MatRipple} from '@angular/material/core';


Expand Down Expand Up @@ -46,6 +46,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 @@ -18,12 +18,14 @@ import {
OnDestroy,
Optional,
Self,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {
CanColor,
CanDisable,
CanDisableRipple,
MatRipple,
mixinColor,
mixinDisabled,
mixinDisableRipple
Expand Down Expand Up @@ -135,6 +137,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 ec2c210

Please sign in to comment.