@tsparticles/angular 4.1.2 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +32 -2
- package/fesm2022/tsparticles-angular.mjs +31 -10
- package/fesm2022/tsparticles-angular.mjs.map +1 -1
- package/package.json +4 -4
- package/types/tsparticles-angular.d.ts +6 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020 Matteo Bruni
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) Angular compo
|
|
|
8
8
|
|
|
9
9
|
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
|
|
10
10
|
|
|
11
|
-
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&
|
|
11
|
+
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_source=badge-tsparticles) <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
|
|
12
12
|
|
|
13
13
|
## Installation
|
|
14
14
|
|
|
@@ -97,7 +97,7 @@ export class AppComponent implements OnInit {
|
|
|
97
97
|
});
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
public particlesLoaded(container
|
|
100
|
+
public particlesLoaded(container?: Container): void {
|
|
101
101
|
console.log(container);
|
|
102
102
|
}
|
|
103
103
|
}
|
|
@@ -113,6 +113,15 @@ export class AppComponent implements OnInit {
|
|
|
113
113
|
<ngx-particles [id]="id" [url]="particlesUrl" (particlesLoaded)="particlesLoaded($event)"></ngx-particles>
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
+
### Reactive prop changes
|
|
117
|
+
|
|
118
|
+
The component detects changes to `id`, `options`, `url`, and `theme` inputs via Angular's `OnChanges` lifecycle hook:
|
|
119
|
+
|
|
120
|
+
- **`id`**, **`options`**, or **`url`** change → the existing container is destroyed and particles are reloaded with the new values.
|
|
121
|
+
- **`theme`** change → `loadTheme` is called on the current container. This requires the optional `@tsparticles/plugin-themes` package to be loaded. Without the plugin, theme changes are a safe no-op (no crash, no throw).
|
|
122
|
+
|
|
123
|
+
The component does **not** track deep mutations of the `options` object — it uses reference equality. To trigger a reload, provide a new object reference.
|
|
124
|
+
|
|
116
125
|
### Module setup
|
|
117
126
|
|
|
118
127
|
```ts
|
|
@@ -125,6 +134,27 @@ import { NgxParticlesModule } from "@tsparticles/angular";
|
|
|
125
134
|
export class AppModule {}
|
|
126
135
|
```
|
|
127
136
|
|
|
137
|
+
### Component API
|
|
138
|
+
|
|
139
|
+
| Input | Type | Default | Description |
|
|
140
|
+
| --------- | ---------------- | --------------- | ------------------------------------------------------------------------- |
|
|
141
|
+
| `id` | `string` | `"tsparticles"` | The DOM element id for the particle container. Change triggers reload. |
|
|
142
|
+
| `options` | `ISourceOptions` | — | The particle configuration object. Change triggers reload. |
|
|
143
|
+
| `url` | `string` | — | A URL to a JSON particle config. Change triggers reload. |
|
|
144
|
+
| `theme` | `string` | — | Theme name (requires `@tsparticles/plugin-themes`). Safe no-op otherwise. |
|
|
145
|
+
|
|
146
|
+
| Output | Type | Description |
|
|
147
|
+
| ----------------- | -------------------------------------- | ------------------------------------------------------------- |
|
|
148
|
+
| `particlesLoaded` | `EventEmitter<Container \| undefined>` | Emitted after `tsParticles.load` resolves with the container. |
|
|
149
|
+
|
|
150
|
+
### Cleanup
|
|
151
|
+
|
|
152
|
+
When the component is destroyed (`ngOnDestroy`), the particle container is automatically destroyed — no orphan animations remain.
|
|
153
|
+
|
|
154
|
+
## Theme support
|
|
155
|
+
|
|
156
|
+
The `theme` input prop requires the optional `@tsparticles/plugin-themes` package to be installed and registered during `NgParticlesService.init(...)`. Without the plugin, theme changes are silently ignored.
|
|
157
|
+
|
|
128
158
|
## Demos
|
|
129
159
|
|
|
130
160
|
The demo website is [here](https://particles.js.org)
|
|
@@ -31,6 +31,7 @@ class NgParticlesService {
|
|
|
31
31
|
if (particlesInit) {
|
|
32
32
|
await particlesInit(tsParticles);
|
|
33
33
|
}
|
|
34
|
+
await tsParticles.init();
|
|
34
35
|
initialized = true;
|
|
35
36
|
})().catch((error) => {
|
|
36
37
|
initPromise = undefined;
|
|
@@ -43,10 +44,10 @@ class NgParticlesService {
|
|
|
43
44
|
async waitForInitialization() {
|
|
44
45
|
await (initPromise ?? Promise.resolve());
|
|
45
46
|
}
|
|
46
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
47
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
47
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgParticlesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
48
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgParticlesService, providedIn: "root" });
|
|
48
49
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgParticlesService, decorators: [{
|
|
50
51
|
type: Injectable,
|
|
51
52
|
args: [{
|
|
52
53
|
providedIn: "root",
|
|
@@ -58,6 +59,7 @@ class NgxParticlesComponent {
|
|
|
58
59
|
options;
|
|
59
60
|
url;
|
|
60
61
|
id = "tsparticles";
|
|
62
|
+
theme;
|
|
61
63
|
particlesLoaded = new EventEmitter();
|
|
62
64
|
#container;
|
|
63
65
|
#loadingPromise;
|
|
@@ -72,6 +74,20 @@ class NgxParticlesComponent {
|
|
|
72
74
|
}
|
|
73
75
|
this.#loadingPromise = this.#loadParticles();
|
|
74
76
|
}
|
|
77
|
+
ngOnChanges(changes) {
|
|
78
|
+
if (isPlatformServer(this.platformId)) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
if (!this.#container) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
if (changes["id"] || changes["options"] || changes["url"]) {
|
|
85
|
+
void this.#loadParticles();
|
|
86
|
+
}
|
|
87
|
+
if (changes["theme"]) {
|
|
88
|
+
this.#container.loadTheme?.(changes["theme"].currentValue);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
75
91
|
ngOnDestroy() {
|
|
76
92
|
this.#container?.destroy();
|
|
77
93
|
this.#loadingPromise = undefined;
|
|
@@ -82,12 +98,15 @@ class NgxParticlesComponent {
|
|
|
82
98
|
this.#container?.destroy();
|
|
83
99
|
const container = await tsParticles.load({ id: this.id, options: this.options, url: this.url });
|
|
84
100
|
this.#container = container;
|
|
101
|
+
if (container && this.theme) {
|
|
102
|
+
container.loadTheme?.(this.theme);
|
|
103
|
+
}
|
|
85
104
|
this.particlesLoaded.emit(container);
|
|
86
105
|
}
|
|
87
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
88
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxParticlesComponent, deps: [{ token: PLATFORM_ID }, { token: NgParticlesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: NgxParticlesComponent, isStandalone: false, selector: "ngx-particles", inputs: { options: "options", url: "url", id: "id", theme: "theme" }, outputs: { particlesLoaded: "particlesLoaded" }, usesOnChanges: true, ngImport: i0, template: '<div [id]="id"></div>', isInline: true });
|
|
89
108
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxParticlesComponent, decorators: [{
|
|
91
110
|
type: Component,
|
|
92
111
|
args: [{
|
|
93
112
|
selector: "ngx-particles",
|
|
@@ -103,16 +122,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
103
122
|
type: Input
|
|
104
123
|
}], id: [{
|
|
105
124
|
type: Input
|
|
125
|
+
}], theme: [{
|
|
126
|
+
type: Input
|
|
106
127
|
}], particlesLoaded: [{
|
|
107
128
|
type: Output
|
|
108
129
|
}] } });
|
|
109
130
|
|
|
110
131
|
class NgxParticlesModule {
|
|
111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
112
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
113
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
132
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxParticlesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
133
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: NgxParticlesModule, declarations: [NgxParticlesComponent], exports: [NgxParticlesComponent] });
|
|
134
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxParticlesModule, providers: [NgParticlesService] });
|
|
114
135
|
}
|
|
115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxParticlesModule, decorators: [{
|
|
116
137
|
type: NgModule,
|
|
117
138
|
args: [{
|
|
118
139
|
declarations: [NgxParticlesComponent],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tsparticles-angular.mjs","sources":["../../../projects/ng-particles/src/lib/ng-particles.service.ts","../../../projects/ng-particles/src/lib/ng-particles.component.ts","../../../projects/ng-particles/src/lib/ng-particles.module.ts","../../../projects/ng-particles/src/public-api.ts","../../../projects/ng-particles/src/tsparticles-angular.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\nimport { Engine, tsParticles } from \"@tsparticles/engine\";\n\nexport type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;\n\nlet initialized = false;\nlet initPromise: Promise<void> | undefined;\nlet initCallback: ParticlesPluginRegistrar | undefined;\n\n@Injectable({\n providedIn: \"root\",\n})\nexport class NgParticlesService {\n public get loaded(): boolean {\n return initialized;\n }\n\n public assertInitialized(): void {\n if (!initialized) {\n throw new Error(\"NgParticlesService.init(...) must be called once before rendering ngx-particles components.\");\n }\n }\n\n public async init(particlesInit?: ParticlesPluginRegistrar): Promise<void> {\n if (initialized) {\n return;\n }\n\n if (initPromise) {\n if (initCallback !== particlesInit) {\n throw new Error(\"NgParticlesService init callback must be stable across the app lifecycle.\");\n }\n\n await initPromise;\n\n return;\n }\n\n initCallback = particlesInit;\n initPromise = (async () => {\n if (particlesInit) {\n await particlesInit(tsParticles);\n }\n\n initialized = true;\n })().catch((error: unknown) => {\n initPromise = undefined;\n initCallback = undefined;\n initialized = false;\n\n throw error;\n });\n\n await initPromise;\n }\n\n public async waitForInitialization(): Promise<void> {\n await (initPromise ?? Promise.resolve());\n }\n}\n","import {
|
|
1
|
+
{"version":3,"file":"tsparticles-angular.mjs","sources":["../../../projects/ng-particles/src/lib/ng-particles.service.ts","../../../projects/ng-particles/src/lib/ng-particles.component.ts","../../../projects/ng-particles/src/lib/ng-particles.module.ts","../../../projects/ng-particles/src/public-api.ts","../../../projects/ng-particles/src/tsparticles-angular.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\nimport { Engine, tsParticles } from \"@tsparticles/engine\";\n\nexport type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;\n\nlet initialized = false;\nlet initPromise: Promise<void> | undefined;\nlet initCallback: ParticlesPluginRegistrar | undefined;\n\n@Injectable({\n providedIn: \"root\",\n})\nexport class NgParticlesService {\n public get loaded(): boolean {\n return initialized;\n }\n\n public assertInitialized(): void {\n if (!initialized) {\n throw new Error(\"NgParticlesService.init(...) must be called once before rendering ngx-particles components.\");\n }\n }\n\n public async init(particlesInit?: ParticlesPluginRegistrar): Promise<void> {\n if (initialized) {\n return;\n }\n\n if (initPromise) {\n if (initCallback !== particlesInit) {\n throw new Error(\"NgParticlesService init callback must be stable across the app lifecycle.\");\n }\n\n await initPromise;\n\n return;\n }\n\n initCallback = particlesInit;\n initPromise = (async () => {\n if (particlesInit) {\n await particlesInit(tsParticles);\n }\n\n await tsParticles.init();\n\n initialized = true;\n })().catch((error: unknown) => {\n initPromise = undefined;\n initCallback = undefined;\n initialized = false;\n\n throw error;\n });\n\n await initPromise;\n }\n\n public async waitForInitialization(): Promise<void> {\n await (initPromise ?? Promise.resolve());\n }\n}\n","import {\n AfterViewInit,\n Component,\n EventEmitter,\n Inject,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n PLATFORM_ID,\n SimpleChanges,\n} from \"@angular/core\";\nimport { isPlatformServer } from \"@angular/common\";\nimport { tsParticles } from \"@tsparticles/engine\";\nimport type { Container } from \"@tsparticles/engine\";\nimport { IParticlesProps } from \"./ng-particles.module\";\nimport { NgParticlesService } from \"./ng-particles.service\";\n\n@Component({\n selector: \"ngx-particles\",\n standalone: false,\n template: '<div [id]=\"id\"></div>',\n})\nexport class NgxParticlesComponent implements AfterViewInit, OnChanges, OnDestroy {\n @Input() options?: IParticlesProps;\n @Input() url?: string;\n @Input() id = \"tsparticles\";\n @Input() theme?: string;\n @Output() particlesLoaded: EventEmitter<Container | undefined> = new EventEmitter<Container | undefined>();\n\n #container?: Container;\n #loadingPromise?: Promise<void>;\n readonly #particlesService: NgParticlesService;\n\n constructor(\n @Inject(PLATFORM_ID) protected platformId: string,\n particlesService: NgParticlesService,\n ) {\n this.#particlesService = particlesService;\n }\n\n public ngAfterViewInit(): void {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n this.#loadingPromise = this.#loadParticles();\n }\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (isPlatformServer(this.platformId)) {\n return;\n }\n\n if (!this.#container) {\n return;\n }\n\n if (changes[\"id\"] || changes[\"options\"] || changes[\"url\"]) {\n void this.#loadParticles();\n }\n\n if (changes[\"theme\"]) {\n (this.#container as unknown as { loadTheme?: (name?: string) => Promise<void> }).loadTheme?.(\n changes[\"theme\"].currentValue,\n );\n }\n }\n\n public ngOnDestroy(): void {\n this.#container?.destroy();\n\n this.#loadingPromise = undefined;\n }\n\n async #loadParticles(): Promise<void> {\n await this.#particlesService.waitForInitialization();\n this.#particlesService.assertInitialized();\n\n this.#container?.destroy();\n\n const container = await tsParticles.load({ id: this.id, options: this.options, url: this.url });\n\n this.#container = container;\n\n if (container && this.theme) {\n (container as unknown as { loadTheme?: (name?: string) => Promise<void> }).loadTheme?.(this.theme);\n }\n\n this.particlesLoaded.emit(container);\n }\n}\n","import { NgModule } from \"@angular/core\";\nimport { NgxParticlesComponent } from \"./ng-particles.component\";\nimport type { ISourceOptions } from \"@tsparticles/engine\";\nimport { NgParticlesService } from \"./ng-particles.service\";\n\n@NgModule({\n declarations: [NgxParticlesComponent],\n exports: [NgxParticlesComponent],\n providers: [NgParticlesService],\n})\nexport class NgxParticlesModule {}\n\nexport type IParticlesProps = ISourceOptions;\nexport { NgParticlesService };\n","/*\n * Public API Surface of ng-particles\n */\n\nexport * from \"./lib/ng-particles.component\";\nexport * from \"./lib/ng-particles.module\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.NgParticlesService"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/angular",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "Official tsParticles Angular Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and 3.x), Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -85,10 +85,10 @@
|
|
|
85
85
|
"access": "public"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
|
-
"@angular/common": ">=
|
|
89
|
-
"@angular/core": ">=
|
|
88
|
+
"@angular/common": ">=12.0.0",
|
|
89
|
+
"@angular/core": ">=12.0.0",
|
|
90
90
|
"rxjs": ">=7.0.0",
|
|
91
|
-
"@tsparticles/engine": "^4.
|
|
91
|
+
"@tsparticles/engine": "^4.2.0"
|
|
92
92
|
},
|
|
93
93
|
"dependencies": {
|
|
94
94
|
"tslib": "^2.8.1"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { AfterViewInit, OnDestroy, EventEmitter } from '@angular/core';
|
|
2
|
+
import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from '@angular/core';
|
|
3
3
|
import { Engine, ISourceOptions, Container } from '@tsparticles/engine';
|
|
4
4
|
|
|
5
5
|
type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;
|
|
@@ -19,18 +19,20 @@ declare class NgxParticlesModule {
|
|
|
19
19
|
}
|
|
20
20
|
type IParticlesProps = ISourceOptions;
|
|
21
21
|
|
|
22
|
-
declare class NgxParticlesComponent implements AfterViewInit, OnDestroy {
|
|
22
|
+
declare class NgxParticlesComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
23
23
|
#private;
|
|
24
24
|
protected platformId: string;
|
|
25
25
|
options?: IParticlesProps;
|
|
26
26
|
url?: string;
|
|
27
27
|
id: string;
|
|
28
|
-
|
|
28
|
+
theme?: string;
|
|
29
|
+
particlesLoaded: EventEmitter<Container | undefined>;
|
|
29
30
|
constructor(platformId: string, particlesService: NgParticlesService);
|
|
30
31
|
ngAfterViewInit(): void;
|
|
32
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
31
33
|
ngOnDestroy(): void;
|
|
32
34
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgxParticlesComponent, never>;
|
|
33
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<NgxParticlesComponent, "ngx-particles", never, { "options": { "alias": "options"; "required": false; }; "url": { "alias": "url"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "particlesLoaded": "particlesLoaded"; }, never, never, false, never>;
|
|
35
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgxParticlesComponent, "ngx-particles", never, { "options": { "alias": "options"; "required": false; }; "url": { "alias": "url"; "required": false; }; "id": { "alias": "id"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; }, { "particlesLoaded": "particlesLoaded"; }, never, never, false, never>;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
export { NgParticlesService, NgxParticlesComponent, NgxParticlesModule };
|