https://github.com/ryukku-/angular-particle
Particle.js rewritted for Angular2/4
https://github.com/ryukku-/angular-particle
angular2 angular4 typescript
Last synced: 11 months ago
JSON representation
Particle.js rewritted for Angular2/4
- Host: GitHub
- URL: https://github.com/ryukku-/angular-particle
- Owner: ryuKKu-
- Created: 2017-06-06T23:42:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T22:39:04.000Z (over 3 years ago)
- Last Synced: 2025-02-08T02:35:29.683Z (over 1 year ago)
- Topics: angular2, angular4, typescript
- Language: TypeScript
- Homepage:
- Size: 2.31 MB
- Stars: 56
- Watchers: 4
- Forks: 22
- Open Issues: 51
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# angular-particle
Implementation of [particle.js](https://github.com/VincentGarreau/particles.js/) with TypeScript for Angular2/4. Inspired by [react-particles-js](https://github.com/Wufe/react-particles-js)
## Installation
To install this library, run:
```bash
$ npm install angular-particle --save
```
## How to use
```typescript
// Import ParticlesModule
import { ParticlesModule } from 'angular-particle';
@NgModule({
declarations: [
...
],
imports: [
...
ParticlesModule
],
providers: [],
bootstrap: []
})
export class AppModule { }
```
And just use the component in your HTML
```html
```
Parameters configuration can be found [here](http://vincentgarreau.com/particles.js/). 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
```typescript
@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',
},
}
};
}
}
```
```html
```
## License
MIT © [Luc Raymond](mailto:ryukku.raymond@gmail.com)