Disable global ripple effect angular 2 app
I have an application that uses material 2, I would like to globally disable the ripple effect for all components or directives that use it. I dont want to do this by overriding css classes. One thing that comes to my mind is to create a directive that can extend MdRipple and then override its properties, not exactly. I would like to know your opinion or an example of how this can be done in the right direction.
source to share
Import of an ordinary token and interface
import { MD_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from '@angular/material';
then create config
const globalRippleConfig: RippleGlobalOptions = {disabled: true};
then add the new provider to your main NgModule
providers: [{provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}]
With MD_RIPPLE_GLOBAL_OPTIONS you can also adjust ripple size, color, animation speed
source to share
The provider has changed in recent versions. You need to use MAT_RIPPLE_GLOBAL_OPTIONS and not MD_RIPPLE_GLOBAL_OPTIONS.
Update 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 { }
source to share
As a slightly simpler alternative: if you want to turn off the ripple effect completely, you don't need it const globalRippleConfig
, you can just paste it into the string.
So it 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
],
source to share