wnabil/ngx-particle

Particle.js rewritted for Angular2+

this project is dead, please use https://www.npmjs.com/package/ng-particles

ngx-particle

Forked from angular-particle

Implementation of particle.js with TypeScript for Angular2+. Inspired by react-particles-js

Installation

To install this library, run:

$ npm install ngx-particle --save

How to use

// Import ParticlesModule
import { ParticlesModule } from 'ngx-particle';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
	...
    ParticlesModule
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

And just use the component in your HTML

<particles [style]="style" [width]="width" [height]="height" [params]="params"></particles>

Parameters configuration can be found here. If you don't provide any parameters, default one are used.

Properties

Property	Type	Definition
params	object	The parameters for particle.js
style	object	The style of the canvas container
width	number	The width of the canvas element (in %)
height	number	The height of the canvas element (in %)

Example

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    myStyle: object = {};
	myParams: object = {};
	width: number = 100;
	height: number = 100;

    ngOnInit() {
        this.myStyle = {
            'position': 'fixed',
            'width': '100%',
            'height': '100%',
            'z-index': -1,
            'top': 0,
            'left': 0,
            'right': 0,
            'bottom': 0,
        };

	this.myParams = {
            particles: {
                number: {
                    value: 200,
                },
                color: {
                    value: '#ff0000'
                },
                shape: {
                    type: 'triangle',
                },
	    }
	};
    }
}

<particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>

License

MIT © Luc Raymond

ngx-particle's Issues

Angular 11 update

Hi.

When will this package be updated to support Angular 11?