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

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

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?

Solution

Here is how to do that:

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>

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>
```
Make the package visible by adding a simple type definition (in your component or in the typings.d.ts)
```
declare var particlesJS: any;
```

Initialize it in ngOnInit (or somewhere else)

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