Official tsParticles Angular component
$ npm install @tsparticles/angular @tsparticles/engineor
$ yarn add @tsparticles/angular @tsparticles/enginetemplate.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";exportclassAppComponent{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(privatereadonlyngParticlesService: 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);awaitloadSlim(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 */],})exportclassAppModule{}The demo website is here
There's also a CodePen collection actively maintained and updated here



