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/VincentGarreau/particles.js/

Thank you.

Answer 1

This is how I got it to work in my NG6 project:

1. Install particles.js from npm: npm i particles.js --save or make sure is already installed.
2. Add node_modules/particles.js/particles.js in your scripts section in angular.json
3. In your component add: declare var particlesJS: any; before @component
4. Go to particles.js and modify the particles to your liking then download the particlesjs-config.json file
5. Store that file in your assets/data folder as particles.json
6. In your component html template add a div with id = "particles-js"

7. In your component ngOnInit add the following code:

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

Hope this helps!

EDIT: Added code

import { Component, OnInit } from '@angular/core';
import { ParticlesConfig } from './../../../../../assets/data/particles';

declare var particlesJS: any;

@Component({
  selector: 'app-heading',
  templateUrl: './heading.component.html',
  styleUrls: ['./heading.component.scss']
})
export class HeadingComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        // https://vincentgarreau.com/particles.js/
        particlesJS('particles-js', ParticlesConfig, function() {
            console.log('callback - particles.js config loaded');
          });
    }
}

the template

<div class="h-75 bg header">
    <div  id="particles-js" class="w-100 header-particles"  >

    </div>
    <div class="header-container w-100">
        <div>
            <h1> Big Header</h1>
            <div>small header</div>
        </div>
    </div>
</div>

and the use in another component

<app-heading></app-heading>
<main>
  <app-features></app-features>
  <app-pricing-tier></app-pricing-tier>
  <app-testimonials></app-testimonials>
  <app-trusted-by></app-trusted-by>
</main>

Answer 2

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

<div id="container">
  <div id="particles-js">
  </div>
  <div id="over">
      <!--Existing markup-->
  </div>
</div>

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

<configuration>
  <system.webServer>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Angular" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

angular.json

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