[feat] ripples: dynamically enable/disable all interaction ripples

[reppners]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Enable/Disable ripples globally at runtime.

What is the current behavior?

Ripples can be disabled globally by providing MAT_RIPPLE_GLOBAL_OPTIONS.

This is static and can't be changed at runtime.
If this assumption is wrong please show me how to dynamically change the root injectors value.

What is the use-case or motivation for changing an existing behavior?

An app that needs to run on low-end-devices as well as high-end devices. The user has the ability to disable styles and effects that degrade performance on low-end devices. This includes disabling ripples.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.6
Node: 6.11.4
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

@angular/cdk: 5.1.1
@angular/cli: 1.6.6
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.1.1
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.24
@angular-devkit/schematics: 0.0.43
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack-bundle-analyzer: 2.9.1
webpack: 3.10.0

[reppners]

Quick follow up:

I applied the workaround mentioned in #8298 (comment)

.mat-ripple-element {
    transition-duration: 0ms !important;
}

Which already improves performance on low-end devices. I like that it still highlights something the user touches which is a lot better than having no feedback at all just because of performance issues.

Maybe the workaround is suitable as an "official" low-performance device workaround?

[devversion]

Dynamically modifying the global ripple options is already partially working (except for chips & tab-nav-bar).

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
  ],
  declarations: [HomeComponent],
  bootstrap: [HomeComponent],
  providers: [
    // Alias the ripple global options to an existing provider instance (singleton; at root)
    { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: AppRippleOptions }
  ]
})
export class AppModule {}

app-ripple-options.ts

import {RippleGlobalOptions, RippleAnimationConfig} from '@angular/material';
import {Injectable} from '@angular/core';

@Injectable({providedIn: 'root'})
export class AppRippleOptions implements RippleGlobalOptions {

  /**
   * Whether ripples should be disabled. Ripples can be still launched manually by using
   * the `launch()` method. Therefore focus indicators will still show up.
   */
  disabled: boolean;
}

home.component.ts

import {Component} from '@angular/core';
import {AppRippleOptions} from './app-ripple-options';

@Component({
  ...
})
export class HomeComponent {

  constructor(private _rippleOptions: AppRippleOptions) {}

  toggleRippleDisabled() {
    this._rippleOptions.disabled = !this._rippleOptions.disabled;
  }
}

I'll be working on making this possible for the chips and tab-nav-bar as well. This is currently blocked by a deprecation until next major (7.0.0)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}