How to implement ripple effect?

Ionic Framework ionic-v3
1

How to implement ripple effect like you have shown as below in screenshot:-

Untitled

2

Hi , try with this pluging https://market.ionicframework.com/plugins/ion-ripple

3

Hello,
@guadyass

This plugin is for ionic version 1

and the ripple effect is there in ionic 3 by default

my problem is i want to give ripple effect as i showed in my screenshot above

4

Have you got any working solution?

5

Hello, @surajkhanal10
Not yet

6

Have you tried with this directive?

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);
    }
}
7

Hello, @surajkhanal10
No

where i put above code in my project?

8

Generate new directive with command ionic generate directive name . replace name with whatever you like. and import that directive in app.module.ts file . now you can add m-ripple-effect attribute to your element.

9

Hello, @surajkhanal10

When i click on button i want to see ripple effect(means some delay i want)
but it instantly open new page because i wrote code that onclick go to next page

10

Hi, I know this is an old tread. You can try https://npmjs.com/package/ng-ripple-module. I hope this will help someone who still looking for solution.