@tsparticles/angular
Version:
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
118 lines (111 loc) • 5.07 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, PLATFORM_ID, Component, Inject, Input, Output, NgModule } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { BehaviorSubject, Subject, mergeMap, takeUntil, from } from 'rxjs';
import { tsParticles } from '@tsparticles/engine';
class NgParticlesService {
initialized = new BehaviorSubject(false);
getInstallationStatus() {
return this.initialized.asObservable();
}
async init(particlesInit) {
await particlesInit(tsParticles);
this.initialized.next(true);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgParticlesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgParticlesService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgParticlesService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class NgxParticlesComponent {
platformId;
particlesService;
options;
url;
id;
particlesInit;
particlesLoaded = new EventEmitter();
subscription;
destroy$ = new Subject();
container;
constructor(platformId, particlesService) {
this.platformId = platformId;
this.particlesService = particlesService;
this.id = 'tsparticles';
}
ngOnInit() {
this.subscription = this.particlesService.getInstallationStatus().subscribe(() => {
this.container?.destroy();
this.loadParticles();
});
}
ngAfterViewInit() {
if (isPlatformServer(this.platformId)) {
return;
}
this.loadParticles();
}
ngOnDestroy() {
this.container?.destroy();
this.subscription?.unsubscribe();
this.destroy$.next();
}
loadParticles() {
const cb = (container) => {
this.container = container;
this.particlesLoaded.emit(container);
};
from(this.particlesInit ? this.particlesInit(tsParticles) : Promise.resolve())
.pipe(mergeMap(() => {
return tsParticles.load({ id: this.id, url: this.url, options: this.options });
}), takeUntil(this.destroy$))
.subscribe(cb);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgxParticlesComponent, deps: [{ token: PLATFORM_ID }, { token: NgParticlesService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NgxParticlesComponent, selector: "ngx-particles", inputs: { options: "options", url: "url", id: "id", particlesInit: "particlesInit" }, outputs: { particlesLoaded: "particlesLoaded" }, ngImport: i0, template: '<div [id]="id"></div>', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgxParticlesComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-particles',
template: '<div [id]="id"></div>',
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: NgParticlesService }], propDecorators: { options: [{
type: Input
}], url: [{
type: Input
}], id: [{
type: Input
}], particlesInit: [{
type: Input
}], particlesLoaded: [{
type: Output
}] } });
class NgxParticlesModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgxParticlesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: NgxParticlesModule, declarations: [NgxParticlesComponent], exports: [NgxParticlesComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgxParticlesModule, providers: [NgParticlesService] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgxParticlesModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxParticlesComponent],
exports: [NgxParticlesComponent],
providers: [NgParticlesService],
}]
}] });
/*
* Public API Surface of ng-particles
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgParticlesService, NgxParticlesComponent, NgxParticlesModule };
//# sourceMappingURL=tsparticles-angular.mjs.map