Disable globally ripple effect angular 2 app

Question

I have an app which is using material 2, i would like to globally disable the ripple effect for all components or directives that use it. I don't want to do this overriding css classes. One thing that comes in my mind is creating a directive which can extend MdRipple and then override its properties, not sure tho. I would like to know your opinion or example how this can be done in the right way.

Answer 1

The provider changed in recent versions. You need to use MAT_RIPPLE_GLOBAL_OPTIONS not MD_RIPPLE_GLOBAL_OPTIONS.

Update your AppModule.ts

...

import {  MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from '@angular/material';

const globalRippleConfig: RippleGlobalOptions = {
  disabled: true
};

@NgModule({
  imports:      [
    ...
    ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue:     globalRippleConfig}]
})
export class AppModule { }

Answer 2

Import ripple specific token and interface

import { MD_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from '@angular/material';

then create config

const globalRippleConfig: RippleGlobalOptions = {disabled: true};

then add new provider to your main NgModule

providers: [{provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}]

With MD_RIPPLE_GLOBAL_OPTIONS you can also configure ripple size, color, animation speed