An Angular directive around dom-confetti

confetti.directive.ts

import { Directive, ElementRef, OnInit, Input, HostListener } from '@angular/core';
import { confetti } from 'dom-confetti';

interface ConfettiConfig {
  angle: number; // - direction of the explosion in degrees, defaults to 90.
  spread: number; // - spread of the explosion in degrees, deafults to 45.
  startVelocity: number; // - Initial velocity of the particles, defaults to 45.
  width: number; // - width of the confetti elements
  height: number; // - height of the confetti elements
  elementCount: number; // - Number of particle elements, defaults to 50.
  decay: number; // - Decrease in velocity per frame, defaults to 0.9
  random: any; // - Randomization function, defaults to Math.random
  delay: number; // delay confetti animation (extending dom-confetti config)
}

@Directive({
  selector: '[appConfetti]'
})
export class ConfettiDirective implements OnInit {

  @Input('appConfetti') inputConfig: ConfettiConfig;

  config: ConfettiConfig;

  @HostListener('click')
  onClick() {
    this.celebrate();
  }

  constructor(private el: ElementRef) { }

  ngOnInit() {
    // default config extended with input config
    this.config = {
      elementCount: 100,
      delay: 0,
      ...this.inputConfig
    };
    setTimeout(() => {
      this.celebrate();
    }, this.config.delay);
  }

  celebrate() {
    confetti(this.el.nativeElement, this.config);
  }

}