Nose Picking Mechanisms

    ng-particles
    TypeScript icon, indicating that this package has built-in type declarations

    3.5.3 • Public • Published

    banner

    ng-particles

    npm npm GitHub Sponsors

    Official tsParticles Angular component

    Slack Discord Telegram

    tsParticles Product Hunt

    How to use it

    Install

    $ npm install ng-particles tsparticles-engine

    or

    $ yarn add ng-particles tsparticles-engine

    Usage

    template.html

    <ng-particles
        [id]="id"
        [options]="particlesOptions"
        [particlesInit]="particlesInit"
        (particlesLoaded)="particlesLoaded($event)"
    ></ng-particles>
    
    <!-- or -->
    
    <ng-particles
        [id]="id"
        [url]="particlesUrl"
        [particlesInit]="particlesInit"
        (particlesLoaded)="particlesLoaded($event)"
    ></ng-particles>

    app.ts

    import { MoveDirection, ClickMode, HoverMode, OutMode } from "tsparticles-engine";
    import { loadFull } from "tsparticles";
    
    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,
                },
                collisions: {
                    enable: true,
                },
                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,
        };
    
        particlesLoaded(container: Container): void {
            console.log(container);
        }
    
        async particlesInit(engine: Engine): Promise<void> {
            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);
        }
    }

    app.module.ts

    import { NgParticlesModule } from "ng-particles";
    import { NgModule } from "@angular/core";
    
    @NgModule({
        declarations: [
            /* AppComponent */
        ],
        imports: [/* other imports */ NgParticlesModule /* NgParticlesModule 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

    Install

    npm i ng-particles

    DownloadsWeekly Downloads

    2,589

    Version

    3.5.3

    License

    MIT

    Unpacked Size

    49.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • ar3s
    • matteobruni