angular-particle-es v0.0.8

AngularParticle

Simple Implementation angular wrapper for ParticleJs.Work with Angular9

Installation

To install this library, first run:

$ npm install particle.js --save

$ npm install angular-particle --save

Then configure path to Particle.js in your angular.json :

            "scripts": [
               ...
              "./node_modules/particles.js/particles.js"
            ]

How to use

// Import ParticlesModule
import { AngularParticleEsModule } from './app-routing.module'; 

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

And just use the component in your HTML

<angular-particle-es [config]="config" [styles]="particleStyles"></angular-particle-es>

Parameters configuration can be found here. If you don't provide any parameters, it will be error.

Properties

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',
                },
	    }
	};
    }
}

<angular-particle-es [config]="myParams" [styles]="myStyle"></angular-particle-es>