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

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

    


    
    

        

            
 Big Header
            
small header
        
    

and the use in another component