IgxRippleDirective

Constructors

new IgxRippleDirective(): IgxRippleDirective

Sets/gets the ripple color.

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

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

rippleColor: string

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

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

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

rippleDisabled: boolean = false

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

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

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

rippleDuration: number = 600

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 type="button" igxButton id="child">Click</button>
</div>

rippleTarget: string = ''