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); } }

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 {}