Particle js background for angular project?

Question

Can anyone explain how to add particle js background for angular 6 project? I followed some tutorials as bellow link.but it didn\'t work for me. https://github.com/VincentGarrea

Answer 1

I would like to add something more to Alberto's answer. I'm on Angular CLI version 8.3.2 and everything works fine. As the question asked, I actually wanted to add it to a background of my component. I achieved that using CSS like this.

HTML

CSS

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#particles-js,
#over {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#over {
  z-index: 10;
}

This setup will apply particles.js background under your existing markup.

EDIT:

If you are using a Azure App Service on Windows (IIS) to deploy it to production, you might get a 404 not found error for particles.json. In that case create a web.config file as follows in src folder, and include it in assets array in angular.json

web.config

angular.json

"assets": [
     "projects/dashboard/src/favicon.ico",
     "projects/dashboard/src/assets",
     "projects/dashboard/src/web.config"
]