1.5.0 • Published 4 years ago

ngx-particle v1.5.0

Weekly downloads
245
License
MIT
Repository
github
Last release
4 years ago

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

PropertyTypeDefinition
paramsobjectThe parameters for particle.js
styleobjectThe style of the canvas container
widthnumberThe width of the canvas element (in %)
heightnumberThe 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