@tsparticles/angular

Official tsParticles Angular component

Installation

npm install @tsparticles/angular @tsparticles/engine

yarn add @tsparticles/angular @tsparticles/engine

How to use

Initialize once

Call NgParticlesService.init(...) once in your app lifecycle before rendering <ngx-particles />.

import { Component, OnInit } from "@angular/core";
import type { Container, ISourceOptions } from "@tsparticles/engine";
import { ClickMode, HoverMode } from "@tsparticles/engine";
import { NgParticlesService } from "@tsparticles/angular";
import { loadSlim } from "@tsparticles/slim";

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

  particlesOptions: ISourceOptions = {
    background: {
      color: {
        value: "#0d47a1",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: ClickMode.push,
        },
        onHover: {
          enable: true,
          mode: HoverMode.repulse,
        },
      },
      modes: {
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    particles: {
      links: {
        enable: true,
      },
      move: {
        direction: "none",
        enable: true,
        outModes: {
          default: "out",
        },
      },
      number: {
        value: 80,
      },
    },
  };

  particlesUrl = "https://foo.bar/particles.json";

  constructor(private readonly ngParticlesService: NgParticlesService) {}

  public ngOnInit(): void {
    void this.ngParticlesService.init(async engine => {
      await loadSlim(engine);
    });
  }

  public particlesLoaded(container: Container): void {
    console.log(container);
  }
}

Template usage

<ngx-particles [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></ngx-particles>

<!-- or -->

<ngx-particles [id]="id" [url]="particlesUrl" (particlesLoaded)="particlesLoaded($event)"></ngx-particles>

Module setup

import { NgModule } from "@angular/core";
import { NgxParticlesModule } from "@tsparticles/angular";

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

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage