ryukku- / angular-particle Goto Github PK

After npm install angular-particle-updated --save, in app.module it says after importing like this: import { ParticlesModule } from 'angular-particle-updated'; Cannot find module angular-particle-updated.
Is there anything else I should do?
Thank You

I'm trying to overwrite the default params object but nothing I try seems to be working. Even when I change the code sample you have in your example, nothing changes.

        this.myParams = {

                    particles: {
                        number: {
                            value: 2,    //changed to 2 instead of 200
                        },

                        color: {
                            value: '#fff000'  //changed color
                        },
                        shape: {
                            type: 'triangle',
                        },
        	    }
        	};

Particle.js rewritted for Angular2/4

is

Particle.js rewritten for Angular2/4

Hi I went thru the steps on the angular 4.4 set up that I got on the local machine.

I see the div ( coming from the particles ) pushing down my content.
But it's got nothing in it. No errors on the console.

Chrome's Inspecter gives me this on that div.
What could be wrong do you guys think?

<particles _ngcontent-c7="" ng-reflect-width="100" ng-reflect-height="100">
        <div class="particles-container">
            <canvas d-particles="" style="width: 100%; height: 100%;" width="1378" height="690"></canvas>
        </div>
    </particles>

The onhover interactions are not working. Any Idea how to debug ?
This is the params values
{
particles: {
number: {
value: 80,
density: {
enable: !0,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: .3,
random: !1,
anim: {
enable: !1,
speed: 10,
opacity_min: .1,
sync: !1
}
},
size: {
value: 3,
random: !0,
anim: {
enable: !1,
speed: 10,
size_min: .1,
sync: !1
}
},
line_linked: {
enable: !0,
distance: 150,
color: "#ffffff",
opacity: .4,
width: 1
},
move: {
enable: !0,
speed: 3,
direction: "none",
random: !1,
straight: !1,
out_mode: "out",
bounce: !1,
attract: {
enable: !1,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: false,
mode: "push"
},
resize: !0
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: .4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: !0
};

The ability to disable the particles when they are not on-screen.
I believe this would help VincentGarreau/particles.js#158

Thanks for the typeScript implementation but when I try to set an image for the type, I get an error:
ERROR TypeError: Cannot read property 'params' of undefined at loadImg (index.js:216) at ParticlesDirective.webpackJsonp.../../../../angular-particle/index.js.ParticlesDirective.ngAfterViewInit (index.js:1231) at callProviderLifecycles (core.es5.js:11182) at callElementProvidersLifecycles (core.es5.js:11157) at callLifecycleHooksChildrenFirst (core.es5.js:11141) at checkAndUpdateView (core.es5.js:12246) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callViewAction (core.es5.js:12603)

myParams:
shape: { type: 'image', stroke: { width: 2, color: '#f0f8f5' }, image: { src: 'IMAGE PATH HERE' } },

[default] /home/sumit/workSpace/ng-colormaster/node_modules/angular-particle/particles.component.d.ts:6:12
Cannot find name 'object'.
[default] Checking finished with 1 errors

Hello,

Thank you for sharing this solution.

I am facing an issue with getting parameters from a JSON file, instead of passing the parameters as an object in the typescript code.
This is the content of my JSON file:

{
  "particles": {
    "number": {
      "value": 200
    },
    "color": {
      "value": "#ff0000"
    },
    "shape": {
      "type": "triangle"
    }
  }
}

and this is how I assign my params variable:

 //...
ngOnInit() {
    //...
    this.http.get("assets/particlesjs-config.json").subscribe(
        data => {
          this.params = data;
          console.log(this.params)
     });
  }

The console.log line prints the content of the json file in the console, but I can't in any way have the animation when I assign the params inside the Http Get subscription.

Thank you for your support

Hi there,
Thanks for implementing this. Is there currently a way to control parameters dynamically from TypeScript?
Thanks!

Will there be a compatibility update for the latest stable release of angular?

Particles.js is not destroyed when the directive is destroyed.

Any idea how to do this?

The components does not listen for global events when it is in the background of another component.

Settings:
"interactivity": {
"detect_on": "window"
}
does not work.

Hi, I have noticed that apps never gets stable status when you have any particle component in the UI.

Also never gets stable even you navigate to other state without particles...

Here an example of how you can reproduce it:
https://stackblitz.com/edit/angular-ajfcsk?file=app%2Fapp.component.ts

Since angular 6 was released, I was wondering if this amazing library would update to use it. I am willing to work on this issue if needed! Here is what needs to be updated according to ng update:

package "angular-particle" has an incompatible peer dependency to "rxjs" (requires "^5.1.0", would install "6.1.0").
Package "angular-particle" has an incompatible peer dependency to "@angular/core" (requires ">=5.0.0-rc.0 <6.0.0||>=4.0.0 <5.0.0", would install "6.0.0").

CPU & GPU usage increases too much on chrome.

A fix has been suggested on particles.js can you please implement that here?