Particle js background for angular project?

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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>

Method 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"
]

Method 3

You can easily implement particle animation using “angular-particle” which is an implementation of particle.js with TypeScript for Angular

It’s implementation is pretty straight forward and you can find it in link below
https://www.npmjs.com/package/angular-particle

Edited:

Here is the running example of angular-particle in angular 8
https://github.com/SunnyMakode/angular-particle-demo

Once you pull the code from github,

  1. type “npm install –save” and hit enter from terminal window
  2. type “ng serve” and hit enter

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply