angular-particle
Implementation of particle.js with TypeScript for Angular2/4. Inspired by react-particles-js
Installation
To install this library, run:
$ npm install angular-particle --saveHow to use
// Import ParticlesModule
import { ParticlesModule } from 'angular-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