diff --git a/src/material/core/private/ripple-loader.ts b/src/material/core/private/ripple-loader.ts index 20d51bde98b4..953e1b603793 100644 --- a/src/material/core/private/ripple-loader.ts +++ b/src/material/core/private/ripple-loader.ts @@ -88,7 +88,7 @@ export class MatRippleLoader implements OnDestroy { }, ): void { // Indicates that the ripple has not yet been rendered for this component. - host.setAttribute(matRippleUninitialized, ''); + host.setAttribute(matRippleUninitialized, this._globalRippleOptions?.namespace ?? ''); // Store the additional class name(s) that should be added to the ripple element. if (config.className || !host.hasAttribute(matRippleClassName)) { @@ -139,7 +139,9 @@ export class MatRippleLoader implements OnDestroy { // TODO(wagnermaciel): Consider batching these events to improve runtime performance. - const element = eventTarget.closest(`[${matRippleUninitialized}]`); + const element = eventTarget.closest( + `[${matRippleUninitialized}="${this._globalRippleOptions?.namespace ?? ''}"]`, + ); if (element) { this._createRipple(element as HTMLElement); } diff --git a/src/material/core/ripple/ripple.ts b/src/material/core/ripple/ripple.ts index f2856004486f..72ca76189368 100644 --- a/src/material/core/ripple/ripple.ts +++ b/src/material/core/ripple/ripple.ts @@ -42,6 +42,11 @@ export interface RippleGlobalOptions { * default, ripples will wait for the enter animation to complete and for mouse or touch release. */ terminateOnPointerUp?: boolean; + + /** + * A namespace to use for ripple loader to allow multiple instances to exist on the same page. + */ + namespace?: string; } /** Injection token that can be used to specify the global ripple options. */