RxJS Challenge #20: Ripple

Welcome to the final boss of our challenge! We will use RxJS to recreate classic ripple effect from Material Design. Let’s go!

Making a directive

We will isolate this code into a directive for better reuse. It will need a couple of global styles to work. Directives cannot have styles bundled with them. For the example we will just define them in a non-encapsulated component but if you want to bundle simple global styles with your directives check out this little service from Taiga UI. You can try implementing ripples yourself in this boilerplate too!

First, we will write down styles for the ripple element and animations for it:

Now inside our directive we need to figure out when to add these elements to the host and when to clean them up.

We will start by listening to pointer events and creating the element with proper styles: