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.
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 { }
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
As a slightly simpler alternative, if you only want to disable the ripple effect completely, you don't need a const globalRippleConfig, you can just put it inline.
So the import looks like this:
// maybe '@angular/material' below depending on your material version
import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material/core';
and in NgModule:
providers: [
{ provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled:true} },
// and any other providers here
],