Search code examples
htmlcssangularparticles.js

Angular ng-particles as background

Iam trying to use ng-particles as a background in my Angular 12 project.
This is my app.component.html:

<div class="main">
    <ng-particles [id]="id" [options]="particlesOptions"></ng-particles>
    <div>
        <app-header></app-header> 
        <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
</div>

The particles are working fine but its obviously just a element over my header, router-outlet and footer. How do i get the ng-particles as a background in Angular ?
I've been searching but found no good example. I have tried setting position: absolut on the ng-particles element but this resulted in a glitched behavior. Thank you for help!
This is the module iam using right now: https://www.npmjs.com/package/ng-particles

Solution

  • You can set the particles as a background using just options. No extra CSS needed.

    You can see the fullScreen options here: https://particles.js.org/docs/interfaces/Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html

    So, the only thing you need is just add this to your particles config:

    {
  fullScreen: {
    enable: true,
    zIndex: 0 // or any value is good for you, if you use -1 set `interactivity.detectsOn` to `"window"` if you need mouse interactions
  },
  /* your config */
}