Ripples

API for ripple

API reference for Angular Material ripple

import {MatRippleModule} from '@angular/material/core';

Selector: [mat-ripple] [matRipple]

Exported as: matRipple
Properties
Name Description
@Input('matRippleAnimation')

animation: RippleAnimationConfig

Configuration for the ripple animation. Allows modifying the enter and exit animation duration of the ripples. The animation durations will be overwritten if the NoopAnimationsModule is being used.
@Input('matRippleCentered')

centered: boolean

Whether the ripple always originates from the center of the host element's bounds, rather than originating from the location of the click event.
@Input('matRippleColor')

color: string

Custom color for all ripples.
@Input('matRippleDisabled')

disabled: boolean

Whether click events will not trigger the ripple. Ripples can be still launched manually by using the launch() method.
@Input('matRippleRadius')

radius: number

If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius will be the distance from the center of the ripple to the furthest corner of the host element's bounding rectangle.
@Input('matRippleTrigger')

trigger: HTMLElement

The element that triggers the ripple when click events are received. Defaults to the directive's host element.
@Input('matRippleUnbounded')

unbounded: boolean

Whether the ripples should be visible outside the component's bounds.
Methods
fadeOutAll

Fades out all currently showing ripple elements.
launch

Launches a manual ripple using the specified ripple configuration.
Parameters

config

RippleConfig

Configuration for the manual ripple.
Returns
RippleRef

launch

Launches a manual ripple at the specified coordinates within the element.
Parameters

x

number

Coordinate within the element, along the X axis at which to fade-in the ripple.

y

number

Coordinate within the element, along the Y axis at which to fade-in the ripple.

config?

RippleConfig

Optional ripple configuration for the manual ripple.
Returns
RippleRef

Reference to a previously launched ripple element.

Properties
Name Description

config: RippleConfig

Ripple configuration used for the ripple.

element: HTMLElement

Reference to the ripple HTML element.

state: RippleState

Current state of the ripple.
Methods
fadeOut

Fades out the ripple element.

Configurable options for matRipple.

Properties
Name Description

animation: RippleAnimationConfig

Configuration for the animation duration of the ripples. There are two phases with different durations for the ripples. The animation durations will be overwritten if the NoopAnimationsModule is being used.

disabled: boolean

Whether ripples should be disabled. Ripples can be still launched manually by using the launch() method. Therefore focus indicators will still show up.

terminateOnPointerUp: boolean

Whether ripples should start fading out immediately after the mouse our touch is released. By default, ripples will wait for the enter animation to complete and for mouse or touch release.

Interface that describes the configuration for the animation of a ripple. There are two animation phases with different durations for the ripples.

Properties
Name Description

enterDuration: number

Duration in milliseconds for the enter animation (expansion from point of contact).

exitDuration: number

Duration in milliseconds for the exit animation (fade-out).

 
type RippleConfig = {
    color?: string;
    centered?: boolean;
    radius?: number;
    persistent?: boolean;
    animation?: RippleAnimationConfig;
    terminateOnPointerUp?: boolean;
};

Injection token that can be used to specify the global ripple options.

const MAT_RIPPLE_GLOBAL_OPTIONS: InjectionToken<RippleGlobalOptions>;

Default ripple animation configuration for ripples without an explicit animation config specified.

const defaultRippleAnimationConfig: { enterDuration: number; exitDuration: number; };