feat(button): expose ripple instance (#9170)

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 #4179

Author: devversion

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;

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) {