As I see by sources of Ionic v3.3, a container element must contain an empty div
element with button-effect
class, also the container must have tappable
attribute and be styled as position: relative; overflow: hidden
.
In my project I use a following directive to style button-like containers:
import {Directive, ElementRef, Host, Renderer2} from '@angular/core';
@Directive({
selector: '[m-ripple-effect]',
host: {
'tappable': '',
'role': 'button',
'style': 'position: relative; overflow: hidden'
}
})
export class RippleEffectDirective {
constructor(@Host() host: ElementRef, renderer: Renderer2) {
const div = renderer.createElement('div');
renderer.addClass(div, 'button-effect');
renderer.appendChild(host.nativeElement, div);
}
}