Ripple directive angular

ripple.directive.ts

import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';

@Directive({
  selector: '[ripple]'
})
export class RippleDirective {

  hostEl;

  constructor(private renderer: Renderer2, el: ElementRef) {
    this.hostEl = el.nativeElement;
  }

  @HostListener('click', ['$event']) onClick(e: MouseEvent) {

    console.log(e);

    let ink, d, x, y;
    if (this.hostEl.querySelector('.ink') === null) {
      ink = this.renderer.createElement('span');
      this.renderer.addClass(ink, 'ink');
      this.renderer.appendChild(this.hostEl, ink);
    }

    ink = this.hostEl.querySelector('.ink');
    this.renderer.appendChild(this.hostEl, ink);
    this.renderer.removeClass(ink, 'animate');

    if (!ink.offsetHeight && !ink.offsetWidth) {
      d = Math.max(this.hostEl.offsetWidth, this.hostEl.offsetHeight);
      this.renderer.setStyle(ink, 'width', d + 'px');
      this.renderer.setStyle(ink, 'height', d + 'px');
    }

    x = e.pageX - this.hostEl.offsetLeft - ink.offsetWidth / 2;
    y = e.pageY - this.hostEl.offsetTop - ink.offsetHeight / 2;

    console.log('x', `${e.pageX} - ${this.hostEl.offsetLeft} - ${ink.offsetWidth / 2} = ${x}`);
    console.log('y', `${e.pageY} - ${this.hostEl.offsetTop} - ${ink.offsetHeight / 2} = ${x}`);


    this.renderer.setStyle(ink, 'top', y + 'px');
    this.renderer.setStyle(ink, 'left', x + 'px');
    this.renderer.addClass(ink, 'animate');
  }


}

style.css

/*  Ripple */

.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  transform:scale(0);
}

.animate {
  -webkit-animation:ripple 0.65s linear;
  -moz-animation:ripple 0.65s linear;
  -ms-animation:ripple 0.65s linear;
  -o-animation:ripple 0.65s linear;
  animation:ripple 0.65s linear;
}

@-webkit-keyframes ripple {
  100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
  100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
  100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
  100% {opacity: 0; transform: scale(2.5);}
}