Ripples

API for ripple

API reference for Angular Material ripple

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

Selector: [mat-ripple] [matRipple]

Exported as: matRipple
Properties
NameDescription
@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.

rippleConfig: RippleConfig

Ripple configuration from the directive's input values.

rippleDisabled: boolean

Whether ripples on pointer-down are disabled or not.

@Input('matRippleSpeedFactor')
Deprecated

speedFactor: number

If set, the normal duration of ripple animations is divided by this value. For example, setting it to 0.5 will cause the animations to take twice as long. A changed speedFactor will not modify the fade-out duration of the ripples.

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
NameDescription

config: RippleConfig

element: HTMLElement

state: RippleState

Current state of the ripple reference.

Methods
fadeOut

Fades out the ripple element.

Configurable options for matRipple.

Properties
NameDescription

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.

Deprecated

baseSpeedFactor: number

If set, the default duration of the fade-in animation is divided by this value. For example, setting it to 0.5 will cause the ripple fade-in animation to take twice as long. A changed speedFactor will not affect the fade-out duration of the ripples.

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

Properties
NameDescription

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: { color?: string; centered?: boolean; radius?: number; persistent?: boolean; animation?: RippleAnimationConfig; terminateOnPointerUp?: boolean; speedFactor?: number; }