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