angular-confetti

Official Angular wrapper for @tsparticles/confetti.

Installation

npm install angular-confetti @tsparticles/confetti @tsparticles/engine

or

yarn add angular-confetti @tsparticles/confetti @tsparticles/engine

How to use

Module setup

import { NgModule } from "@angular/core";
import { NgxConfettiModule } from "angular-confetti";

@NgModule({
  imports: [NgxConfettiModule],
})
export class AppModule {}

Template usage

<ngx-confetti [id]="id" [options]="confettiOptions" [fire]="fire"></ngx-confetti>

Component usage

import { Component } from "@angular/core";
import type { ConfettiOptions } from "@tsparticles/confetti";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  public id = "tsparticles";
  public fire = true;

  public confettiOptions: ConfettiOptions = {
    angle: 90,
    count: 50,
    spread: 45,
    startVelocity: 45,
  };
}

fire accepts boolean | number:

• true: fires once when mounted
• false: does not fire
• changing value (or incrementing a number): fires again