feat: added service for initializing particles plugins

Author: matteobruni

apps/angular-demo/src/app/app.component.html

@@ -226,7 +226,7 @@
 
   .circle-link:hover {
     transform: translateY(-0.25rem);
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
   }
 
   footer {
@@ -836,7 +836,6 @@ <h2>Next Steps</h2>
   <ngx-particles
     id="tsparticles"
     [options]="particlesOptions"
-    [particlesInit]="particlesInit"
     (particlesLoaded)="particlesLoaded($event)"
     *ngIf="particlesVisible"
   ></ngx-particles>

apps/angular-demo/src/app/app.component.ts

@@ -2,14 +2,15 @@ import { Component } from "@angular/core";
 import type { Container, Engine, ISourceOptions } from "@tsparticles/engine";
 import { loadFull } from "tsparticles";
 import configs from "@tsparticles/configs";
+import { NgParticlesService } from "@tsparticles/angular";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"]
+  styleUrls: [ "./app.component.css" ]
 })
 export class AppComponent {
-  title = "angular13";
+  title = "angular";
   id = "tsparticles";
   fire = 0;
   particlesVisible = true;
@@ -42,16 +43,15 @@ export class AppComponent {
     //this.confettiVisible = !this.confettiVisible;
   }
 
-  constructor() {
+  constructor(private ngParticlesService: NgParticlesService) {
   }
 
   ngOnInit(): void {
-  }
-
-  async particlesInit(engine: Engine): Promise<void> {
-    console.log("init", engine);
+    void this.ngParticlesService.init(async (engine: Engine) => {
+      console.log("init", engine);
 
-    await loadFull(engine);
+      await loadFull(engine);
+    });
   }
 
   public particlesLoaded(container: Container): void {

apps/ionic-demo/src/app/app.component.ts

@@ -1,10 +1,21 @@
 import { Component } from '@angular/core';
+import { NgParticlesService } from "@tsparticles/angular";
+import { loadFull } from "tsparticles";
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss'],
+  styleUrls: [ 'app.component.scss' ],
 })
 export class AppComponent {
-  constructor() {}
+  constructor(private ngParticlesService: NgParticlesService) {
+  }
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      console.log("init", engine);
+
+      await loadFull(engine);
+    });
+  }
 }

apps/ionic-demo/src/app/tab1/tab1.page.html

@@ -16,5 +16,5 @@
   <app-explore-container name="Tab 1 page"></app-explore-container>
 
   <ngx-particles [id]="particlesId" [options]="particlesOptions"
-                (particlesLoaded)="particlesLoaded($event)" [particlesInit]="particlesInit"></ngx-particles>
+                (particlesLoaded)="particlesLoaded($event)"></ngx-particles>
 </ion-content>

apps/ionic-demo/src/app/tab1/tab1.page.ts

@@ -1,6 +1,5 @@
 import { Component } from "@angular/core";
-import type { Container, Engine } from "@tsparticles/engine";
-import { loadFull } from "tsparticles";
+import type { Container } from "@tsparticles/engine";
 import configs from "@tsparticles/configs";
 
 @Component({
@@ -21,8 +20,4 @@ export class Tab1Page {
       container.refresh();
     }, 500);
   }
-
-  async particlesInit(main: Engine): Promise<void> {
-    await loadFull(main);
-  }
 }

components/particles/projects/ng-particles/src/lib/ng-particles.component.ts

@@ -1,33 +1,65 @@
-import { AfterViewInit, Component, EventEmitter, Inject, Input, OnDestroy, Output, PLATFORM_ID } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    EventEmitter,
+    Inject,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    PLATFORM_ID,
+} from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import { from, mergeMap, Subject, takeUntil } from 'rxjs';
+import { from, mergeMap, Subject, Subscription, takeUntil } from 'rxjs';
 import { tsParticles } from '@tsparticles/engine';
 import type { Container, Engine } from '@tsparticles/engine';
 import { IParticlesProps } from './ng-particles.module';
+import { NgParticlesService } from './ng-particles.service';
 
 @Component({
     selector: 'ngx-particles',
     template: '<div [id]="id"></div>',
 })
-export class NgxParticlesComponent implements AfterViewInit, OnDestroy {
+export class NgxParticlesComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() options?: IParticlesProps;
     @Input() url?: string;
     @Input() id: string;
     @Input() particlesInit?: (engine: Engine) => Promise<void>;
     @Output() particlesLoaded: EventEmitter<Container> = new EventEmitter<Container>();
 
+    private subscription?: Subscription;
     private destroy$ = new Subject<void>();
     private container?: Container;
 
-    constructor(@Inject(PLATFORM_ID) protected platformId: string) {
+    constructor(
+        @Inject(PLATFORM_ID) protected platformId: string,
+        private readonly particlesService: NgParticlesService,
+    ) {
         this.id = 'tsparticles';
     }
 
+    public ngOnInit() {
+        this.subscription = this.particlesService.getInstallationStatus().subscribe(() => {
+            this.container?.destroy();
+            this.loadParticles();
+        });
+    }
+
     public ngAfterViewInit(): void {
         if (isPlatformServer(this.platformId)) {
             return;
         }
 
+        this.loadParticles();
+    }
+
+    public ngOnDestroy(): void {
+        this.container?.destroy();
+        this.subscription?.unsubscribe();
+        this.destroy$.next();
+    }
+
+    private loadParticles(): void {
         const cb = (container?: Container) => {
             this.container = container;
             this.particlesLoaded.emit(container);
@@ -42,9 +74,4 @@ export class NgxParticlesComponent implements AfterViewInit, OnDestroy {
             )
             .subscribe(cb);
     }
-
-    public ngOnDestroy(): void {
-        this.container?.destroy();
-        this.destroy$.next();
-    }
 }

components/particles/projects/ng-particles/src/lib/ng-particles.module.ts

@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { NgxParticlesComponent } from './ng-particles.component';
 import type { ISourceOptions } from '@tsparticles/engine';
+import { NgParticlesService } from './ng-particles.service';
 
 @NgModule({
     declarations: [NgxParticlesComponent],
     exports: [NgxParticlesComponent],
+    providers: [NgParticlesService],
 })
 export class NgxParticlesModule {}
 
 export type IParticlesProps = ISourceOptions;
-export type IParticlesParams = IParticlesProps;
+export { NgParticlesService };

components/particles/projects/ng-particles/src/lib/ng-particles.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Engine, tsParticles } from '@tsparticles/engine';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class NgParticlesService {
+    private initialized = new BehaviorSubject<boolean>(false);
+
+    getInstallationStatus() {
+        return this.initialized.asObservable();
+    }
+
+    async init(particlesInit: (engine: Engine) => Promise<void>) {
+        await particlesInit(tsParticles);
+
+        this.initialized.next(true);
+    }
+}