Tengo una aplicación que usa el material 2, me gustaría deshabilitar globalmente el efecto dominó para todos los componentes o directivas que lo usan. No quiero hacer esto anulando las clases css. Una cosa que me viene a la mente es crear una directiva que pueda extender MdRipple y luego anular sus propiedades, aunque no estoy seguro. Me gustaría saber su opinión o ejemplo de cómo se puede hacer esto de la manera correcta.
El proveedor cambió en versiones recientes. Debe usar MAT_RIPPLE_GLOBAL_OPTIONS no MD_RIPPLE_GLOBAL_OPTIONS.
Actualice su 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 { }Importar token e interfaz específicos de Ripple
import { MD_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from '@angular/material';luego crea la configuración
const globalRippleConfig: RippleGlobalOptions = {disabled: true};luego agregue un nuevo proveedor a su NgModule principal
providers: [{provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}]Con MD_RIPPLE_GLOBAL_OPTIONS también puede configurar el tamaño de la ondulación, el color y la velocidad de la animación.
Como una alternativa un poco más simple, si solo desea deshabilitar el efecto dominó por completo, no necesita un const globalRippleConfig , simplemente puede ponerlo en línea.
Así que la import se ve así:
// maybe '@angular/material' below depending on your material version import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material/core'; y en NgModule :
providers: [ { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled:true} }, // and any other providers here ],