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/VincentGarreau/particles.js/
Thank you.
1
-
Hi, please accept the answer below or tell me if you are having problems implementing it. Cheers!!Alberto L. Bonfiglio– Alberto L. Bonfiglio2018-10-09 22:01:04 +00:00Commented Oct 9, 2018 at 22:01
Add a comment
|
3 Answers
This is how I got it to work in my NG6 project:
- Install particles.js from npm: npm i particles.js --save or make sure is already installed.
- Add node_modules/particles.js/particles.js in your scripts section in angular.json
- In your component add: declare var particlesJS: any; before @component
- Go to particles.js and modify the particles to your liking then download the particlesjs-config.json file
- Store that file in your assets/data folder as particles.json
- In your component html template add a div with id = "particles-js"
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
<div class="h-75 bg header">
<div id="particles-js" class="w-100 header-particles" >
</div>
<div class="header-container w-100">
<div>
<h1> Big Header</h1>
<div>small header</div>
</div>
</div>
</div>
and the use in another component
<app-heading></app-heading>
<main>
<app-features></app-features>
<app-pricing-tier></app-pricing-tier>
<app-testimonials></app-testimonials>
<app-trusted-by></app-trusted-by>
</main>
6 Comments
J.Kirk.
Did exactly this and recieving error "Cannot read property 'getElementsByClassName' of null at window.particlesJS" Know of a fix?
codephobia
Just had to setup the same thing in Angular 7. Had to initialize it in AfterViewInit rather than OnInit to avoid the getElementsByClassName errors.
Alberto L. Bonfiglio
@codephobia Weird. I am using angular 7.2.3 in a new project and had no issues putting it in the ngOnInit
Alberto L. Bonfiglio
@codephobia. Are you by chance creating the component in an ngFor or other construct that could delay the creation of the element?
Seba M
@AlbertoL.Bonfiglio Can you tell me, how to properly include this into my test? The basic
should create test are not working, due to ReferenceError: particlesJS is not defined. I am testing in Karama and also tried to include the declaration of the particlesJS variable by outsourcing it into typings.d.ts and including it as files:['typing.d.ts'] in my karma.conf.ts(Works fine on serving, but not testing) |
I would like to add something more to Alberto's answer. I'm on Angular CLI version 8.3.2 and everything works fine. As the question asked, I actually wanted to add it to a background of my component. I achieved that using CSS like this.
HTML
<div id="container">
<div id="particles-js">
</div>
<div id="over">
<!--Existing markup-->
</div>
</div>
CSS
#container {
width: 100px;
height: 100px;
position: relative;
}
#particles-js,
#over {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#over {
z-index: 10;
}
This setup will apply particles.js background under your existing markup.
EDIT:
If you are using a Azure App Service on Windows (IIS) to deploy it to production, you might get a 404 not found error for particles.json. In that case create a web.config file as follows in src folder, and include it in assets array in angular.json
web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
angular.json
"assets": [
"projects/dashboard/src/favicon.ico",
"projects/dashboard/src/assets",
"projects/dashboard/src/web.config"
]
2 Comments
Caelan
Have you tried this? github.com/matteobruni/ng-particles
Nishan
Wow, Thanks. I was not aware of this. @Caelan
You can easily implement particle animation using "angular-particle" which is an implementation of particle.js with TypeScript for Angular
It's implementation is pretty straight forward and you can find it in link below https://www.npmjs.com/package/angular-particle
Edited:
Here is the running example of angular-particle in angular 8 https://github.com/SunnyMakode/angular-particle-demo
Once you pull the code from github,
- type "npm install --save" and hit enter from terminal window
- type "ng serve" and hit enter
3 Comments
Sunny
"angular-particle" is working fine for me. I am using Angular 8 by the way. I will post the github link shortly for reference
Sunny
Hi Timothy, Here is the running example of angular-particle in angular 8 github.com/SunnyMakode/angular-particle-demo Once you pull the code from github, >> type "npm install --save" and hit enter from terminal window >> type "ng serve" and hit enter
Caelan
Have you tried this? github.com/matteobruni/ng-particles