fixed error

package.json

@@ -10,31 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/build-angular": "~21.0.3",
-    "@angular/animations": "21.0.5",
-    "@angular/cdk": "21.0.3",
-    "@angular/common": "~21.0.5",
-    "@angular/compiler": "21.0.5",
-    "@angular/core": "21.0.5",
-    "@angular/forms": "~21.0.5",
-    "@angular/material": "21.0.3",
-    "@angular/platform-browser": "~21.0.5",
-    "@angular/router": "~21.0.5",
-    "@ngx-translate/core": "~17.0.0",
-    "@ngx-translate/http-loader": "~17.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0"
+    "@angular-devkit/build-angular": "^21.0.3",
+    "@angular/animations": "^21.0.5",
+    "@angular/cdk": "^21.0.3",
+    "@angular/common": "^21.0.5",
+    "@angular/compiler": "^21.0.5",
+    "@angular/core": "^21.0.5",
+    "@angular/forms": "^21.0.5",
+    "@angular/material": "^21.0.3",
+    "@angular/platform-browser": "^21.0.5",
+    "@angular/router": "^21.0.5",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
+    "@tsparticles/angular": "~3.0.0",
+    "@tsparticles/engine": "~3.9.1",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.3.0",
+    "tsparticles": "~3.9.1"
   },
   "devDependencies": {
-    "@angular/build": "21.0.3",
-    "@angular/cli": "21.0.3",
-    "@angular/compiler-cli": "21.0.5",
-    "@angular/platform-browser-dynamic": "~21.0.5",
-    "@types/jasmine": "~5.1.0",
-    "jasmine-core": "~5.9.0",
-    "typescript": "~5.9.2"
-  },
-  "overrides": {
-    "@angular/*": "20.3.10"
+    "@angular/build": "^21.0.3",
+    "@angular/cli": "^21.0.3",
+    "@angular/compiler-cli": "^21.0.5",
+    "@angular/platform-browser-dynamic": "^21.0.5",
+    "@types/jasmine": "^5.1.0",
+    "jasmine-core": "^5.9.0",
+    "typescript": "^5.9.2"
   }
 }

src/app/layout/background/particles-bg.component.html

@@ -1 +1,6 @@
-<canvas #canvas class="particles"></canvas>
+<ngx-particles
+  [id]="id"
+  [options]="particlesOptions"
+  [particlesInit]="particlesInit"
+  (particlesLoaded)="particlesLoaded($event)"
+></ngx-particles>

src/app/layout/background/particles-bg.component.ts

@@ -1,68 +1,104 @@
-import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
+import {
+  Container,
+  MoveDirection,
+  OutMode,
+  Engine
+} from "@tsparticles/engine";
+import {NgParticlesService, NgxParticlesModule} from "@tsparticles/angular";
+import {Component} from '@angular/core';
 import {loadFull} from 'tsparticles';
 
 @Component({
   selector: 'app-particles-bg',
   standalone: true,
-  imports: [],
+  imports: [
+    NgxParticlesModule
+  ],
   templateUrl: './particles-bg.component.html',
   styleUrl: './particles-bg.component.scss',
 })
-export class ParticlesBgComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
+export class ParticlesBgComponent {
+  id = "tsparticles";
 
-  private container?: Container;
+  /* Starting from 1.19.0 you can use a remote url (AJAX request) to a JSON with the configuration */
+  particlesUrl = "http://foo.bar/particles.json";
 
-  async ngAfterViewInit() {
-    const engine = new Engine();
-    await loadFull(engine);
-
-    const options: ISourceOptions = {
-      fullScreen: { enable: false }, // we manage size via the canvas
-      background: { color: { value: 'transparent' } },
-      fpsLimit: 60,
-      detectRetina: true,
-      interactivity: {
-        events: {
-          onClick: { enable: true, mode: 'push' },
-          onHover: { enable: false, mode: 'repulse' },
-          resize: true
-        },
-        modes: {
-          push: { quantity: 4 } // <- number of new vertices per click
-        }
+  /* or the classic JavaScript object */
+  particlesOptions = {
+    /*background: {
+      color: {
+        value: "#0d47a1",
       },
-      particles: {
-        number: { value: 55, density: { enable: true, area: 900 } },
-        color: { value: '#23b7ff' },
-        opacity: { value: 0.35 },
-        size: { value: { min: 1, max: 3 } },
-        move: {
+    },
+    fpsLimit: 120,
+    interactivity: {
+      events: {
+        onClick: {
           enable: true,
-          speed: 0.7,
-          outModes: { default: 'out' }
         },
-        links: {
+        onHover: {
           enable: true,
-          distance: 140,
-          color: '#23b7ff',
-          opacity: 0.25,
-          width: 1
-        }
-      }
-    };
+        },
+        resize: true,
+      },
+      modes: {
+        push: {
+          quantity: 4,
+        },
+        repulse: {
+          distance: 200,
+          duration: 0.4,
+        },
+      },
+    },
+    particles: {
+      color: {
+        value: "#ffffff",
+      },
+      links: {
+        color: "#ffffff",
+        distance: 150,
+        enable: true,
+        opacity: 0.5,
+        width: 1,
+      },
+      move: {
+        direction: MoveDirection.none,
+        enable: true,
+        outModes: {
+          default: OutMode.bounce,
+        },
+        random: false,
+        speed: 6,
+        straight: false,
+      },
+      number: {
+        density: {
+          enable: true,
+          area: 800,
+        },
+        value: 80,
+      },
+      opacity: {
+        value: 0.5,
+      },
+      shape: {
+        type: "circle",
+      },
+      size: {
+        value: { min: 1, max: 5 },
+      },
+    },
+    detectRetina: true,*/
+  };
 
-    this.container = await engine.load({
-      element: this.canvasRef.nativeElement,
-      options
-    });
-
-    // Let clicks go through to the canvas (we want pointer events on canvas only)
-    this.canvasRef.nativeElement.style.pointerEvents = 'auto';
-    (this.canvasRef.nativeElement.parentElement as HTMLElement).style.pointerEvents = 'none';
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+  async particlesInit(engine: Engine): Promise<void> {
+    await loadFull(engine);
   }
 
-  ngOnDestroy() {
-    this.container?.destroy();
+
+  particlesLoaded(container: Container): void {
+    console.log(container);
   }
 }

src/app/pages/imprint/imprint.component.ts

@@ -1,15 +1,13 @@
 import { Component } from '@angular/core';
 import {MatCard} from '@angular/material/card';
 import {TranslatePipe} from '@ngx-translate/core';
-import {MatIcon} from '@angular/material/icon';
 import {SharedFunctions} from '../../shared/SharedFunctions';
 
 @Component({
   selector: 'app-imprint',
   imports: [
     MatCard,
-    TranslatePipe,
-    MatIcon
+    TranslatePipe
   ],
   templateUrl: './imprint.component.html',
   styleUrl: './imprint.component.scss',