@tsparticles/angular

Official tsParticles Angular component

How to use it

Install

$ npm install @tsparticles/angular @tsparticles/engine

or

$ yarn add @tsparticles/angular @tsparticles/engine

Usage

template.html

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

<!-- or -->

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

app.ts

import { MoveDirection, ClickMode, HoverMode, OutMode } from "@tsparticles/engine";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
import { NgParticlesService } from "@tsparticles/angular";

export class AppComponent {
    id = "tsparticles";

    /* Starting from 1.19.0 you can use a remote url (AJAX request) to a JSON with the configuration */
    particlesUrl = "http://foo.bar/particles.json";

    /* or the classic JavaScript object */
    particlesOptions = {
        background: {
            color: {
                value: "#0d47a1",
            },
        },
        fpsLimit: 120,
        interactivity: {
            events: {
                onClick: {
                    enable: true,
                    mode: ClickMode.push,
                },
                onHover: {
                    enable: true,
                    mode: HoverMode.repulse,
                },
                resize: true,
            },
            modes: {
                push: {
                    quantity: 4,
                },
                repulse: {
                    distance: 200,
                    duration: 0.4,
                },
            },
        },
        particles: {
            color: {
                value: "#ffffff",
            },
            links: {
                color: "#ffffff",
                distance: 150,
                enable: true,
                opacity: 0.5,
                width: 1,
            },
            move: {
                direction: MoveDirection.none,
                enable: true,
                outModes: {
                    default: OutMode.bounce,
                },
                random: false,
                speed: 6,
                straight: false,
            },
            number: {
                density: {
                    enable: true,
                    area: 800,
                },
                value: 80,
            },
            opacity: {
                value: 0.5,
            },
            shape: {
                type: "circle",
            },
            size: {
                value: { min: 1, max: 5 },
            },
        },
        detectRetina: true,
    };

    constructor(private readonly ngParticlesService: NgParticlesService) {}

    ngOnInit(): void {
        this.ngParticlesService.init(async () => {
            console.log(engine);

            // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
            // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
            // starting from v2 you can add only the features you need reducing the bundle size
            //await loadFull(engine);
            await loadSlim(engine);
        });
    }

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

app.module.ts

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

@NgModule({
    declarations: [
        /* AppComponent */
    ],
    imports: [/* other imports */ NgxParticlesModule /* NgxParticlesModule is required*/],
    providers: [],
    bootstrap: [
        /* AppComponent */
    ],
})
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