Using particles.js as a background with Angular 10

Moving backgrounds became famous in those days and I wanted to add one for my portfolio, as well. I did some research and I found the Particle.js library by Vincent Garreau.

To add it, you have to start by creating a particle.js file with the code from his generator and add it into your index.html.

To show it as a background, add the id “particle-js” to the parent element and, in this way, all the pages will have the same background. In my case, I added it in app.component.html

To load the file and run the script, I imported particlesJS and called the load in ngOnInit(). Instead of copy-pasting the configuration for the particles into the load, I choose to save it in assets and import it.

I changed some colors and removed the mouse events I didn’t need.

particles.json

My challenge in adding it was to understand why it is not showing even if I received the “loading” message and on breakpoint it hits the functions from the javascript file.

I found out that it needed some styling because the canvas with the particles was added at the bottom of the div with the particles-js id.

Position fixed “fixed” this for me since I wanted it as a background. I added a low z-index which, in this case, deactivated also the interaction with the mouse over it.

✨ Passionate photographer and Frontend Developer @Deloitte Digital, former frontend developer @IBM and DBA @Groupe Renault