IgxRippleDirective
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;
IgxRippleDirective
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;
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 type="button" igxButton id="child">Click</button>
</div>
IgxRippleDirective
Enables/disables the ripple to be centered.
<button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button>
IgxRippleDirective
Sets/gets the ripple color.