Particles.js no particles are loaded in angular

Question

I have added particles.js to an Angular 4 project like mentioned here

Json file is being loaded but I don't see particles on screen

In .ts component :

    import { Component, Output, ViewEncapsulation, OnInit } from '@angular/core';
    import { MnFullpageOptions, MnFullpageService } from 'ngx-fullpage';


    declare var particlesJS: any;

    @Component({
      selector: 'app-root',
      encapsulation: ViewEncapsulation.None,
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      title = 'app';
      @Output() public options: MnFullpageOptions = new MnFullpageOptions({
        autoScrolling: true,
        controlArrows: false,
      });

      ngOnInit() {


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


      }
      constructor() { }
    }

Html file :

    <div id="particles-js" style="border:2px solid black; background-color:red">
      <div class="menu-wrapper">

      </div>
      <div id="content-wrapper" [mnFullpage]="options" [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true" [mnFullpageSlidesNavigation]="true" mnFullpageSlidesNavPosition="bottom">
        <div class="section welcome-section fp-section fp-table ">
          <div class="fp-tableCell ">
            <div id="presentation" class="example-card" fxLayout="row">

              <app-slide-presentation>
              </app-slide-presentation>
            </div>
          </div>

        </div>
        <div class="section welcome-section fp-section fp-table">
          <div class="fp-tableCell">
            <div id="formation" class="example-card" fxLayout="row" fxLayoutAlign="center center">

              <app-formation>
              </app-formation>
            </div>
          </div>
        </div>
        <div class="section welcome-section fp-section fp-table">
          <div fxLayout="row" class="fp-tableCell " style="height:100%; width:60%; overflow:hidden; margin:auto ; background-color:white ">
            <div class="slide" >
              <app-competences1>
              </app-competences1>
              <div class="slide" style="background-color:white">
    >
              </div>
              <div class="slide">

              </div>
              <div class="slide">

              </div>
              <div class="slide">

              </div>

            </div>

          </div>

        </div>
      </div>
    </div>

In console I get callback message :

callback - particles.js config loaded

I have initiated a new project where everything is being working :

in ts component file :

    import { Component, Input, Output, OnInit, ViewEncapsulation } from '@angular/core';

    declare var particlesJS: any;

    @Component({
      selector: 'app-root',
      encapsulation: ViewEncapsulation.None,

      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

      title = 'app';

      ngOnInit() {

        particlesJS.load('particles-js', 'assets/particlesjs-config.json', null);

      }
    }

in html :

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

particles are loading perfectly.

I don't see the difference between 2 examples.

The difference between the two components is the use of `ngx-fullpage`, right? — Jorg, Jul 31 '17 at 23:57
Here I'm talking about particles.js that is not loading in first example — Hamza Haddad, Jul 31 '17 at 23:59
I know, I'm wondering if the fullscreen thing just has a higher Z value, or pushes it out of the screen — Jorg, Aug 01 '17 at 00:09
May be yes , because for exemple it works on `
` but not in global div — Hamza Haddad, Aug 01 '17 at 10:39
You could check your browsers console and look through the DOM, see if you find your particles. Then check the css associated with it / the fullscreen div. — Jorg, Aug 01 '17 at 10:42

score 0 · Answer 1 · answered Oct 28 '19 at 21:15

0

Adding "background-color" to 'particles-js' container worked for me.

@home.component.html:

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

@home.component.scss:

#particles-js {
  height: 100vh;
  background-color: black;
}

answered Oct 28 '19 at 21:15

QauseenMZ

1,081
8
6

Particles.js no particles are loaded in angular

1 Answers1