angular-fireworks

Official Angular wrapper for @tsparticles/fireworks.

Installation

npm install angular-fireworks @tsparticles/fireworks

or

yarn add angular-fireworks @tsparticles/fireworks

How to use

Module setup

import { NgModule } from "@angular/core";
import { NgxFireworksModule } from "angular-fireworks";

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

Template usage

<ngx-fireworks [id]="id" [options]="fireworksOptions"></ngx-fireworks>

The component reactively updates when id or options inputs change — the previous fireworks instance is stopped and a new one is started automatically.

Lifecycle

On component destroy (ngOnDestroy), the fireworks instance is stopped and cleaned up. A #destroyed flag prevents change detection from restarting fireworks after teardown.

Component usage

import { Component } from "@angular/core";
import type { FireworkOptions } from "@tsparticles/fireworks";

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

  public fireworksOptions: FireworkOptions = {
    background: {
      color: {
        value: "#000000",
      },
    },
    sounds: {
      enable: false,
    },
  };
}