fix(ripple): global ripple configuration on init (#4238)

* Currently when no bindings are set on the `mdRipple` target, the `ngOnChanges` will not fire and the `globalRippleOptions` will be ignored forever.

Fixes #4235

src/lib/core/ripple/ripple.spec.ts

@@ -24,6 +24,7 @@ describe('MdRipple', () => {
       declarations: [
         BasicRippleContainer,
         RippleContainerWithInputBindings,
+        RippleContainerWithoutBindings,
         RippleContainerWithNgIf,
       ],
     });
@@ -351,23 +352,38 @@ describe('MdRipple', () => {
   describe('global ripple options', () => {
     let rippleDirective: MdRipple;
 
-    function createTestComponent(rippleConfig: RippleGlobalOptions) {
+    function createTestComponent(rippleConfig: RippleGlobalOptions,
+                                 testComponent: any = BasicRippleContainer) {
       // Reset the previously configured testing module to be able set new providers.
       // The testing module has been initialized in the root describe group for the ripples.
       TestBed.resetTestingModule();
       TestBed.configureTestingModule({
         imports: [MdRippleModule],
-        declarations: [BasicRippleContainer],
+        declarations: [testComponent],
         providers: [{ provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig }]
       });
 
-      fixture = TestBed.createComponent(BasicRippleContainer);
+      fixture = TestBed.createComponent(testComponent);
       fixture.detectChanges();
 
       rippleTarget = fixture.nativeElement.querySelector('[mat-ripple]');
       rippleDirective = fixture.componentInstance.ripple;
     }
 
+    it('should work without having any binding set', () => {
+      createTestComponent({ disabled: true }, RippleContainerWithoutBindings);
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    });
+
     it('when disabled should not show any ripples on mousedown', () => {
       createTestComponent({ disabled: true });
 
@@ -577,6 +593,11 @@ class RippleContainerWithInputBindings {
   @ViewChild(MdRipple) ripple: MdRipple;
 }
 
+@Component({
+  template: `<div id="container" #ripple="mdRipple" mat-ripple></div>`,
+})
+class RippleContainerWithoutBindings {}
+
 @Component({ template: `<div id="container" mat-ripple [mdRippleSpeedFactor]="0"
                              *ngIf="!isDestroyed"></div>` })
 class RippleContainerWithNgIf {

src/lib/core/ripple/ripple.ts

@@ -87,6 +87,8 @@ export class MdRipple implements OnChanges, OnDestroy {
   ) {
     this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler);
     this._globalOptions = globalOptions ? globalOptions : {};
+
+    this._updateRippleRenderer();
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -94,8 +96,7 @@ export class MdRipple implements OnChanges, OnDestroy {
       this._rippleRenderer.setTriggerElement(this.trigger);
     }
 
-    this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled;
-    this._rippleRenderer.rippleConfig = this.rippleConfig;
+    this._updateRippleRenderer();
   }
 
   ngOnDestroy() {
@@ -122,4 +123,10 @@ export class MdRipple implements OnChanges, OnDestroy {
       color: this.color
     };
   }
+
+  /** Updates the ripple renderer with the latest ripple configuration. */
+  private _updateRippleRenderer() {
+    this._rippleRenderer.rippleDisabled = this._globalOptions.disabled || this.disabled;
+    this._rippleRenderer.rippleConfig = this.rippleConfig;
+  }
 }