How to import and use particles.js in an Angular/Angular2/Angular4 app

Question

I have an Angular app that I want to use particles.js in however I have no clue how to add it and get it working.

I've added it to the .angular-cli.json

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

And I've imported it into my component

import * as  particlesJS from 'particles.js';

And attempted to initialize it using

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

Has anyone got this working?

Answer 1

Using the original package, without the https://github.com/audrenbdb/angular-particlesjs you can go as follows:

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 show it as full height)

#particles-js {
  height: 100vh;
}

angular.json

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

Answer 2

Here is how to do that:

1. Just import the particles.js in your index.html (cdn or local)

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

2. Put in the div anchor into your component template (you could also put it to index.html or somewhere else)

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

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

   declare var particlesJS: any;
   

4. Initialize it in ngOnInit (or somewhere else)

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

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