How to import and use particle.js in an Angular / Angular2 / Angular4 application

Question

I have an Angular application that I want to use particle.js, however I do not know how to add it and make it work.

I added it to .angular-cli.json

"scripts": [ "../node_modules/particles.js/particles.js" ], 

And I imported it into my component

 import * as particlesJS from 'particles.js'; 

And tried to initialize it with

  particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded'); }); 

Has anyone got this job?

Answer 1

Here's how to do it:

• Just import particle.js into your index.html (cdn or local)

   <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 

• Paste the div binding into your component template (you can also put it in index.html or somewhere else)

   <div id="particles-js"></div> 

• Make the package visible by adding a simple type definition (in your component or in the typings.d.ts file)

   declare var particlesJS: any; 

• Initialize it to ngOnInit (or somewhere else)

   particlesJS.load('particles-js', 'particles.json', null); 

I made a small plunker example: http://plnkr.co/edit/GLRvYgNPJue4KqdMuAJB?p=preview

Answer 2

Hi, I have ported the angular version of 6+ .js particles as a separate component. All you have to do is add

 <app-particles></app-particles> 

inside the div you want to cover with particles.

https://github.com/audrenbdb/angular-particlesjs

And the demo: https://angular-d7nfwj.stackblitz.io

Edit to your liking :)

Answer 3

I just want to add a comment to the Ado Ren solution (I can not comment on its solution because I do not have enough reputation)

Works well on Angular 8, but with minor changes

Change the 28th line in the .component.ts particle file:

 From : @ViewChild('particles') particlesCanvas: ElementRef; To : @ViewChild('particles', {static: true}) particlesCanvas: ElementRef; 

---

Without this small change, the error rushes into the corner 8

 ERROR in app/particles/particles.component.ts(28,4): error TS2554: Expected 2 arguments, but got 1. 

In addition, you must change the background color of the particle component from white to something else. Otherwise, you will not see them, since they are also white.

Answer 4

Using the original package, without https://github.com/audrenbdb/angular-particlesjs you can do the following:

Install it using npm i particles.js

app.component.html

 <div id="particles-js"></div> 

app.component.ts

 import { Component, OnInit } from '@angular/core'; import { ParticlesConfig } from './particles-config'; declare let particlesJS: any; // Required to be properly interpreted by TypeScript. @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { public ngOnInit(): void { this.invokeParticles(); } public invokeParticles(): void { particlesJS('particles-js', ParticlesConfig, function() {}); } } 

particles-config.ts

 export const ParticlesConfig = { particles: { number: { value: 70, density: { enable: true, value_area: 1400 } }, color: { value: '#283593' }, shape: { type: 'polygon', stroke: { width: 1, color: '#283593' }, polygon: { nb_sides: 6 } }, opacity: { value: 1, random: true, anim: { enable: true, speed: 0.8, opacity_min: 0.25, sync: true } }, size: { value: 2, random: true, anim: { enable: true, speed: 10, size_min: 1.25, sync: true } }, line_linked: { enable: true, distance: 150, color: '#283593', opacity: 1, width: 1 }, move: { enable: true, speed: 8, direction: 'none', random: true, straight: false, out_mode: 'out', bounce: true, attract: { enable: true, rotateX: 2000, rotateY: 2000 } } }, interactivity: { detect_on: 'canvas', events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'repulse' }, resize: true }, modes: { grab: { distance: 200, line_linked: { opacity: 3 } }, repulse: { distance: 250, duration: 2 } } }, retina_detect: true 

};

app.component.scss (optional to display it at full height)

 #particles-js { height: 100vh; } 

angular.json

 "scripts": ["node_modules/particles.js/particles.js"] 

Answer 5

Have you tried installing from the package manager on the command line?

Package Installation

NPM

https://www.npmjs.com/package/particles.js

 npm install particles.js 

Bauer

 bower install particles.js --save 

More detailed usage instructions on this page: Scroll to use and install https://github.com/VincentGarreau/particles.js/

If you have done this, the error messages you see will be helpful.