Skip to content

tsparticles/angular

Folders and files

NameName
Last commit message
Last commit date

Latest commit

86bf0b3 · Apr 1, 2024
Dec 25, 2023
Dec 27, 2022
Jan 23, 2024
Mar 8, 2024
Dec 27, 2022
Dec 27, 2022
Dec 27, 2022
Dec 25, 2023
Dec 28, 2022
Dec 25, 2023
Dec 25, 2023
Dec 25, 2023
Mar 8, 2024
Jan 2, 2023
Apr 1, 2024
Oct 2, 2023
Nov 16, 2023

Repository files navigation

banner

@tsparticles/angular

npm npm GitHub Sponsors

Official tsParticles Angular component

Slack Discord Telegram

tsParticles Product Hunt

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