diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index ea873d8..bd7b59e 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -28,12 +28,12 @@ jobs:
# uses: nrwl/nx-set-shas@v3
- uses: actions/setup-node@v4
with:
- node-version: '16'
+ node-version: '20'
- uses: pnpm/action-setup@v2.4.0
name: Install pnpm
id: pnpm-install
with:
- version: 7
+ version: 8
run_install: false
- name: Get pnpm version
id: pnpm-version
@@ -70,7 +70,7 @@ jobs:
# uses: nrwl/nx-set-shas@v3
- uses: actions/setup-node@v4
with:
- node-version: '16'
+ node-version: '20'
- uses: pnpm/action-setup@v2.4.0
name: Install pnpm
id: pnpm-install
@@ -111,7 +111,7 @@ jobs:
# - uses: actions/checkout@v3
# - uses: actions/setup-node@v3
# with:
-# node-version: '16'
+# node-version: '20'
# - uses: pnpm/action-setup@v2.2.2
# name: Install pnpm
# id: pnpm-install
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..bcf47f1
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,30 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 3.0.0 (2023-12-25)
+
+
+### Bug Fixes
+
+* **deps:** update angular monorepo ([0df2410](https://github.com/tsparticles/angular/commit/0df2410d75e7a5b44766f44cf81c1d38478b33a9))
+* **deps:** update angular monorepo ([7734c62](https://github.com/tsparticles/angular/commit/7734c62fa1f0dba72675296a58b5f9e99f45c790))
+* **deps:** update angular monorepo to ~15.2.0 ([d9cc057](https://github.com/tsparticles/angular/commit/d9cc0579949f025c7be095b92abb121f2f450036))
+* **deps:** update angular monorepo to ~16.2.0 ([c94af32](https://github.com/tsparticles/angular/commit/c94af3266705e56cdd68fd9709882f97bf0a95a1))
+* **deps:** update angular monorepo to v16 ([ca8f4e4](https://github.com/tsparticles/angular/commit/ca8f4e47c4476a5f4548ad25f365f56caa7ce912))
+* **deps:** update dependency @capacitor/app to v5 ([ad5a080](https://github.com/tsparticles/angular/commit/ad5a0801b2ed8b46b460b8917cc3e288a00ad479))
+* **deps:** update dependency @capacitor/haptics to v5 ([0754bb7](https://github.com/tsparticles/angular/commit/0754bb766882db012719624947ce1e9c011db649))
+* **deps:** update dependency @capacitor/keyboard to v5 ([9cb00ac](https://github.com/tsparticles/angular/commit/9cb00ac7a584a24c5693ce3fbbe8257e6eed78a6))
+* **deps:** update dependency @capacitor/status-bar to v5 ([303717a](https://github.com/tsparticles/angular/commit/303717adbd7bdf51620cb4d6bee6204803b532e2))
+* **deps:** update dependency @ionic/angular to v7 ([7650cd0](https://github.com/tsparticles/angular/commit/7650cd010916947db786d20e5c9b7cac186f3523))
+* **deps:** update dependency @ionic/core to v7 ([be06511](https://github.com/tsparticles/angular/commit/be0651198bff6b15cd990abb532ab85cc98f0885))
+* **deps:** update dependency ionicons to v7 ([b551ad4](https://github.com/tsparticles/angular/commit/b551ad4e37685000063e0258190d9d1c5ef6dcc4))
+* **deps:** update dependency zone.js to ~0.13.0 ([9eaf8c1](https://github.com/tsparticles/angular/commit/9eaf8c1e184fbe813e0f2ec4ed14d35c677bc8a3))
+
+
+### Features
+
+* added fire property to trigger confetti fire ([ba64ff5](https://github.com/tsparticles/angular/commit/ba64ff53130e0bbad18a3a4e4e2b19dc27d05020))
+* added service for initializing particles plugins ([c26e9f2](https://github.com/tsparticles/angular/commit/c26e9f2caa2038e652f2967a38ac26c6b5264a49))
+* preparing confetti and fireworks components ([a098d21](https://github.com/tsparticles/angular/commit/a098d217f7f332bfef5bda4d6d846b762ee4aea3))
diff --git a/README.md b/README.md
index 9784af5..8568e41 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
-# ng-particles
+# @tsparticles/angular
-[![npm](https://img.shields.io/npm/v/ng-particles)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles)](https://www.npmjs.com/package/ng-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![npm](https://img.shields.io/npm/v/@tsparticles/angular)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/@tsparticles/angular)](https://www.npmjs.com/package/@tsparticles/angular) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/matteobruni/tsparticles) Angular component
@@ -15,13 +15,13 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) Angular compo
### Install
```shell
-$ npm install ng-particles tsparticles-engine
+$ npm install @tsparticles/angular @tsparticles/engine
```
or
```shell
-$ yarn add ng-particles tsparticles-engine
+$ yarn add @tsparticles/angular @tsparticles/engine
```
### Usage
@@ -29,21 +29,19 @@ $ yarn add ng-particles tsparticles-engine
_template.html_
```html
-
+>
-
+>
```
_app.ts_
@@ -54,9 +52,10 @@ import {
ClickMode,
HoverMode,
OutMode,
-} from "tsparticles-engine";
+} from "@tsparticles/engine";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
-import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
+import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
+import { NgParticlesService } from "@tsparticles/angular";
export class AppComponent {
id = "tsparticles";
@@ -135,18 +134,22 @@ export class AppComponent {
detectRetina: true,
};
- particlesLoaded(container: Container): void {
- console.log(container);
- }
+ constructor(private readonly ngParticlesService: NgParticlesService) {}
- async particlesInit(engine: Engine): Promise {
- console.log(engine);
+ ngOnInit(): void {
+ this.ngParticlesService.init(async () => {
+ console.log(engine);
- // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
- // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
- // starting from v2 you can add only the features you need reducing the bundle size
- //await loadFull(engine);
- await loadSlim(engine);
+ // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
+ // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+ // starting from v2 you can add only the features you need reducing the bundle size
+ //await loadFull(engine);
+ await loadSlim(engine);
+ });
+ }
+
+ particlesLoaded(container: Container): void {
+ console.log(container);
}
}
```
@@ -154,7 +157,7 @@ export class AppComponent {
_app.module.ts_
```typescript
-import { ParticlesModule } from "ng-particles";
+import { NgxParticlesModule } from "@tsparticles/angular";
import { NgModule } from "@angular/core";
@NgModule({
@@ -162,7 +165,7 @@ import { NgModule } from "@angular/core";
/* AppComponent */
],
imports: [
- /* other imports */ ParticlesModule /* ParticlesModule is required*/,
+ /* other imports */ NgxParticlesModule /* NgxParticlesModule is required*/,
],
providers: [],
bootstrap: [
diff --git a/apps/angular-demo/CHANGELOG.md b/apps/angular-demo/CHANGELOG.md
index 72bb358..22a3a9d 100644
--- a/apps/angular-demo/CHANGELOG.md
+++ b/apps/angular-demo/CHANGELOG.md
@@ -3,7 +3,30 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-# [2.12.0](https://github.com/tsparticles/angular/compare/ng-particles-demo@2.11.0...ng-particles-demo@2.12.0) (2023-08-04)
+# 3.0.0 (2023-12-25)
+
+
+### Bug Fixes
+
+* **deps:** update angular monorepo ([0df2410](https://github.com/tsparticles/angular/commit/0df2410d75e7a5b44766f44cf81c1d38478b33a9))
+* **deps:** update angular monorepo ([7734c62](https://github.com/tsparticles/angular/commit/7734c62fa1f0dba72675296a58b5f9e99f45c790))
+* **deps:** update angular monorepo to ~15.2.0 ([d9cc057](https://github.com/tsparticles/angular/commit/d9cc0579949f025c7be095b92abb121f2f450036))
+* **deps:** update angular monorepo to ~16.2.0 ([c94af32](https://github.com/tsparticles/angular/commit/c94af3266705e56cdd68fd9709882f97bf0a95a1))
+* **deps:** update angular monorepo to v16 ([ca8f4e4](https://github.com/tsparticles/angular/commit/ca8f4e47c4476a5f4548ad25f365f56caa7ce912))
+* **deps:** update dependency zone.js to ~0.13.0 ([9eaf8c1](https://github.com/tsparticles/angular/commit/9eaf8c1e184fbe813e0f2ec4ed14d35c677bc8a3))
+
+
+### Features
+
+* added fire property to trigger confetti fire ([ba64ff5](https://github.com/tsparticles/angular/commit/ba64ff53130e0bbad18a3a4e4e2b19dc27d05020))
+* added service for initializing particles plugins ([c26e9f2](https://github.com/tsparticles/angular/commit/c26e9f2caa2038e652f2967a38ac26c6b5264a49))
+* preparing confetti and fireworks components ([a098d21](https://github.com/tsparticles/angular/commit/a098d217f7f332bfef5bda4d6d846b762ee4aea3))
+
+
+
+
+
+# [3.0.0-beta.3](https://github.com/tsparticles/angular/compare/ng-particles-demo@2.11.0...ng-particles-demo@3.0.0-beta.3) (2023-08-04)
**Note:** Version bump only for package ng-particles-demo
diff --git a/apps/angular-demo/package.json b/apps/angular-demo/package.json
index 5fdc350..1a4ae42 100644
--- a/apps/angular-demo/package.json
+++ b/apps/angular-demo/package.json
@@ -1,6 +1,6 @@
{
- "name": "ng-particles-demo",
- "version": "2.12.0",
+ "name": "@tsparticles/angular-demo",
+ "version": "3.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve -o",
@@ -11,84 +11,88 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "~16.2.0",
- "@angular/common": "~16.2.0",
- "@angular/compiler": "~16.2.0",
- "@angular/core": "~16.2.0",
- "@angular/forms": "~16.2.0",
- "@angular/platform-browser": "~16.2.0",
- "@angular/platform-browser-dynamic": "~16.2.0",
- "@angular/router": "~16.2.0",
- "ng-confetti": "^2.12.0",
- "ng-fireworks": "^2.12.0",
- "ng-particles": "^3.12.0",
+ "@angular/animations": "~17.0.8",
+ "@angular/common": "~17.0.8",
+ "@angular/compiler": "~17.0.8",
+ "@angular/core": "~17.0.8",
+ "@angular/forms": "~17.0.8",
+ "@angular/platform-browser": "~17.0.8",
+ "@angular/platform-browser-dynamic": "~17.0.8",
+ "@angular/router": "~17.0.8",
+ "@tsparticles/angular": "workspace:^",
+ "@tsparticles/basic": "^3.0.2",
+ "@tsparticles/confetti": "^3.0.2",
+ "@tsparticles/configs": "^3.0.2",
+ "@tsparticles/effect-trail": "^3.0.2",
+ "@tsparticles/engine": "^3.0.2",
+ "@tsparticles/fireworks": "^3.0.2",
+ "@tsparticles/interaction-external-attract": "^3.0.2",
+ "@tsparticles/interaction-external-bounce": "^3.0.2",
+ "@tsparticles/interaction-external-bubble": "^3.0.2",
+ "@tsparticles/interaction-external-connect": "^3.0.2",
+ "@tsparticles/interaction-external-grab": "^3.0.2",
+ "@tsparticles/interaction-external-pause": "^3.0.2",
+ "@tsparticles/interaction-external-push": "^3.0.2",
+ "@tsparticles/interaction-external-remove": "^3.0.2",
+ "@tsparticles/interaction-external-repulse": "^3.0.2",
+ "@tsparticles/interaction-external-slow": "^3.0.2",
+ "@tsparticles/interaction-external-trail": "^3.0.2",
+ "@tsparticles/interaction-particles-attract": "^3.0.2",
+ "@tsparticles/interaction-particles-collisions": "^3.0.2",
+ "@tsparticles/interaction-particles-links": "^3.0.2",
+ "@tsparticles/move-base": "^3.0.2",
+ "@tsparticles/move-parallax": "^3.0.2",
+ "@tsparticles/pjs": "^3.0.2",
+ "@tsparticles/plugin-absorbers": "^3.0.2",
+ "@tsparticles/plugin-easing-quad": "^3.0.2",
+ "@tsparticles/plugin-emitters": "^3.0.2",
+ "@tsparticles/plugin-emitters-shape-circle": "^3.0.2",
+ "@tsparticles/plugin-emitters-shape-square": "^3.0.2",
+ "@tsparticles/plugin-motion": "^3.0.2",
+ "@tsparticles/plugin-polygon-mask": "^3.0.2",
+ "@tsparticles/plugin-sounds": "^3.0.2",
+ "@tsparticles/shape-cards": "^3.0.2",
+ "@tsparticles/shape-circle": "^3.0.2",
+ "@tsparticles/shape-emoji": "^3.0.2",
+ "@tsparticles/shape-heart": "^3.0.2",
+ "@tsparticles/shape-image": "^3.0.2",
+ "@tsparticles/shape-line": "^3.0.2",
+ "@tsparticles/shape-polygon": "^3.0.2",
+ "@tsparticles/shape-square": "^3.0.2",
+ "@tsparticles/shape-star": "^3.0.2",
+ "@tsparticles/shape-text": "^3.0.2",
+ "@tsparticles/slim": "^3.0.2",
+ "@tsparticles/updater-color": "^3.0.2",
+ "@tsparticles/updater-destroy": "^3.0.2",
+ "@tsparticles/updater-life": "^3.0.2",
+ "@tsparticles/updater-opacity": "^3.0.2",
+ "@tsparticles/updater-out-modes": "^3.0.2",
+ "@tsparticles/updater-roll": "^3.0.2",
+ "@tsparticles/updater-rotate": "^3.0.2",
+ "@tsparticles/updater-size": "^3.0.2",
+ "@tsparticles/updater-stroke-color": "^3.0.2",
+ "@tsparticles/updater-tilt": "^3.0.2",
+ "@tsparticles/updater-twinkle": "^3.0.2",
+ "@tsparticles/updater-wobble": "^3.0.2",
+ "angular-confetti": "workspace:^",
+ "angular-fireworks": "workspace:^",
"rxjs": "~7.8.1",
- "tslib": "^2.6.1",
- "tsparticles": "^2.12.0",
- "tsparticles-basic": "^2.12.0",
- "tsparticles-confetti": "^2.12.0",
- "tsparticles-demo-configs": "^2.12.0",
- "tsparticles-engine": "^2.12.0",
- "tsparticles-fireworks": "^2.12.0",
- "tsparticles-interaction-external-attract": "^2.12.0",
- "tsparticles-interaction-external-bounce": "^2.12.0",
- "tsparticles-interaction-external-bubble": "^2.12.0",
- "tsparticles-interaction-external-connect": "^2.12.0",
- "tsparticles-interaction-external-grab": "^2.12.0",
- "tsparticles-interaction-external-pause": "^2.12.0",
- "tsparticles-interaction-external-push": "^2.12.0",
- "tsparticles-interaction-external-remove": "^2.12.0",
- "tsparticles-interaction-external-repulse": "^2.12.0",
- "tsparticles-interaction-external-slow": "^2.12.0",
- "tsparticles-interaction-external-trail": "^2.12.0",
- "tsparticles-interaction-particles-attract": "^2.12.0",
- "tsparticles-interaction-particles-collisions": "^2.12.0",
- "tsparticles-interaction-particles-links": "^2.12.0",
- "tsparticles-move-base": "^2.12.0",
- "tsparticles-move-parallax": "^2.12.0",
- "tsparticles-particles.js": "^2.12.0",
- "tsparticles-plugin-absorbers": "^2.12.0",
- "tsparticles-plugin-easing-quad": "^2.12.0",
- "tsparticles-plugin-emitters": "^2.12.0",
- "tsparticles-plugin-motion": "^2.12.0",
- "tsparticles-plugin-polygon-mask": "^2.12.0",
- "tsparticles-plugin-sounds": "^2.12.0",
- "tsparticles-shape-cards": "^2.12.0",
- "tsparticles-shape-circle": "^2.12.0",
- "tsparticles-shape-heart": "^2.12.0",
- "tsparticles-shape-image": "^2.12.0",
- "tsparticles-shape-line": "^2.12.0",
- "tsparticles-shape-polygon": "^2.12.0",
- "tsparticles-shape-square": "^2.12.0",
- "tsparticles-shape-star": "^2.12.0",
- "tsparticles-shape-text": "^2.12.0",
- "tsparticles-slim": "^2.12.0",
- "tsparticles-updater-color": "^2.12.0",
- "tsparticles-updater-destroy": "^2.12.0",
- "tsparticles-updater-life": "^2.12.0",
- "tsparticles-updater-opacity": "^2.12.0",
- "tsparticles-updater-out-modes": "^2.12.0",
- "tsparticles-updater-roll": "^2.12.0",
- "tsparticles-updater-rotate": "^2.12.0",
- "tsparticles-updater-size": "^2.12.0",
- "tsparticles-updater-stroke-color": "^2.12.0",
- "tsparticles-updater-tilt": "^2.12.0",
- "tsparticles-updater-twinkle": "^2.12.0",
- "tsparticles-updater-wobble": "^2.12.0",
- "zone.js": "~0.13.0"
+ "tslib": "^2.6.2",
+ "tsparticles": "^3.0.2",
+ "zone.js": "~0.14.2"
},
"devDependencies": {
- "@angular-devkit/build-angular": "~16.2.0",
- "@angular/cli": "~16.2.0",
- "@angular/compiler-cli": "~16.2.0",
- "@types/jasmine": "~4.3.5",
- "@types/node": "^20.4.7",
- "jasmine-core": "~5.1.0",
+ "@angular-devkit/build-angular": "~17.0.8",
+ "@angular/cli": "~17.0.8",
+ "@angular/compiler-cli": "~17.0.8",
+ "@types/jasmine": "~5.1.4",
+ "@types/node": "^20.10.5",
+ "jasmine-core": "~5.1.1",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
- "typescript": "~5.1.6"
+ "typescript": "~5.2.2"
}
}
diff --git a/apps/angular-demo/src/app/app.component.html b/apps/angular-demo/src/app/app.component.html
index 4406600..a9fc78e 100644
--- a/apps/angular-demo/src/app/app.component.html
+++ b/apps/angular-demo/src/app/app.component.html
@@ -10,8 +10,8 @@