{"id":14973558,"url":"https://github.com/ryukku-/angular-particle","last_synced_at":"2025-08-01T06:34:29.961Z","repository":{"id":38324824,"uuid":"93572482","full_name":"ryuKKu-/angular-particle","owner":"ryuKKu-","description":"Particle.js rewritted for Angular2/4","archived":false,"fork":false,"pushed_at":"2023-01-10T22:39:04.000Z","size":2417,"stargazers_count":56,"open_issues_count":51,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-08T02:35:29.683Z","etag":null,"topics":["angular2","angular4","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryuKKu-.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-06T23:42:32.000Z","updated_at":"2023-09-08T17:26:02.000Z","dependencies_parsed_at":"2023-02-08T20:31:17.248Z","dependency_job_id":null,"html_url":"https://github.com/ryuKKu-/angular-particle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuKKu-%2Fangular-particle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuKKu-%2Fangular-particle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuKKu-%2Fangular-particle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryuKKu-%2Fangular-particle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryuKKu-","download_url":"https://codeload.github.com/ryuKKu-/angular-particle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238418232,"owners_count":19468869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2","angular4","typescript"],"created_at":"2024-09-24T13:48:57.103Z","updated_at":"2025-02-12T05:31:25.032Z","avatar_url":"https://github.com/ryuKKu-.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-particle\n\nImplementation 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)\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install angular-particle --save\n```\n\n## How to use\n\n```typescript\n// Import ParticlesModule\nimport { ParticlesModule } from 'angular-particle';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n\t...\n    ParticlesModule\n  ],\n  providers: [],\n  bootstrap: []\n})\nexport class AppModule { }\n```\n\nAnd just use the component in your HTML\n\n```html\n\u003cparticles [style]=\"style\" [width]=\"width\" [height]=\"height\" [params]=\"params\"\u003e\u003c/particles\u003e\n```\n\nParameters configuration can be found [here](http://vincentgarreau.com/particles.js/). If you don't provide any parameters, default one are used.\n\n\n## Properties\n\n| Property | Type   | Definition                              |\n| -------- | ------ | --------------------------------------- |\n| params   | object | The parameters for particle.js          |\n| style    | object | The style of the canvas container       |\n| width    | number | The width of the canvas element (in %)  |\n| height   | number | The height of the canvas element (in %) |\n\n\n## Example\n\n```typescript\n\n@Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n    myStyle: object = {};\n\tmyParams: object = {};\n\twidth: number = 100;\n\theight: number = 100;\n\n    ngOnInit() {\n        this.myStyle = {\n            'position': 'fixed',\n            'width': '100%',\n            'height': '100%',\n            'z-index': -1,\n            'top': 0,\n            'left': 0,\n            'right': 0,\n            'bottom': 0,\n        };\n\n\tthis.myParams = {\n            particles: {\n                number: {\n                    value: 200,\n                },\n                color: {\n                    value: '#ff0000'\n                },\n                shape: {\n                    type: 'triangle',\n                },\n\t    }\n\t};\n    }\n}\n```\n\n```html\n\u003cparticles [params]=\"myParams\" [style]=\"myStyle\" [width]=\"width\" [height]=\"height\"\u003e\u003c/particles\u003e\n```\n\n\n## License\n\nMIT © [Luc Raymond](mailto:ryukku.raymond@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryukku-%2Fangular-particle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryukku-%2Fangular-particle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryukku-%2Fangular-particle/lists"}