Sets/gets the ripple color.

<button #rippleContainer [igxRipple] = "'red'" ></button>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleColor = this.ripple.rippleColor;

Memberof

IgxRippleDirective

Sets/gets whether the ripple is disabled. Default value is false.

<button #rippleContainer igxRipple [igxRippleDisabled] = "true"></button>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let isRippleDisabled = this.ripple.rippleDisabled;

Memberof

IgxRippleDirective

Sets/gets the ripple duration(in milliseconds). Default value is 600.

<button #rippleContainer igxRipple [igxRippleDuration] = "800"></button>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleDuration = this.ripple.rippleDuration;

Memberof

IgxRippleDirective

Sets/gets the ripple target.

<div  #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleTarget = this.ripple.rippleTarget;

Can set the ripple to activate on a child element inside the parent where igxRipple is defined.

<div #rippleContainer [igxRippleTarget] = "'#child"'>
 <button id="child">Click</button>
</div>

Memberof

IgxRippleDirective