@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
74 lines • 8.99 kB
JavaScript
import { Component, EventEmitter, Inject, Input, Output, PLATFORM_ID, } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { from, mergeMap, Subject, takeUntil } from 'rxjs';
import { tsParticles } from '@tsparticles/engine';
import * as i0 from "@angular/core";
import * as i1 from "./ng-particles.service";
export 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: i1.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: i1.NgParticlesService }], propDecorators: { options: [{
type: Input
}], url: [{
type: Input
}], id: [{
type: Input
}], particlesInit: [{
type: Input
}], particlesLoaded: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctcGFydGljbGVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXBhcnRpY2xlcy9zcmMvbGliL25nLXBhcnRpY2xlcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVILFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFHTCxNQUFNLEVBQ04sV0FBVyxHQUNkLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBZ0IsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBU2xELE1BQU0sT0FBTyxxQkFBcUI7SUFZSztJQUNkO0lBWlosT0FBTyxDQUFtQjtJQUMxQixHQUFHLENBQVU7SUFDYixFQUFFLENBQVM7SUFDWCxhQUFhLENBQXFDO0lBQ2pELGVBQWUsR0FBNEIsSUFBSSxZQUFZLEVBQWEsQ0FBQztJQUUzRSxZQUFZLENBQWdCO0lBQzVCLFFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBQy9CLFNBQVMsQ0FBYTtJQUU5QixZQUNtQyxVQUFrQixFQUNoQyxnQkFBb0M7UUFEdEIsZUFBVSxHQUFWLFVBQVUsQ0FBUTtRQUNoQyxxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQW9CO1FBRXJELElBQUksQ0FBQyxFQUFFLEdBQUcsYUFBYSxDQUFDO0lBQzVCLENBQUM7SUFFTSxRQUFRO1FBQ1gsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQzdFLElBQUksQ0FBQyxTQUFTLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFDMUIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3pCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLGVBQWU7UUFDbEIsSUFBSSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDbkMsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFTSxXQUFXO1FBQ2QsSUFBSSxDQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsQ0FBQztRQUMxQixJQUFJLENBQUMsWUFBWSxFQUFFLFdBQVcsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVPLGFBQWE7UUFDakIsTUFBTSxFQUFFLEdBQUcsQ0FBQyxTQUFxQixFQUFFLEVBQUU7WUFDakMsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7WUFDM0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDekMsQ0FBQyxDQUFDO1FBRUYsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQzthQUN6RSxJQUFJLENBQ0QsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNWLE9BQU8sV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsQ0FBQztRQUNuRixDQUFDLENBQUMsRUFDRixTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUMzQjthQUNBLFNBQVMsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN2QixDQUFDO3VHQXJEUSxxQkFBcUIsa0JBWWxCLFdBQVc7MkZBWmQscUJBQXFCLDRMQUZwQix1QkFBdUI7OzJGQUV4QixxQkFBcUI7a0JBSmpDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ3BDOzswQkFhUSxNQUFNOzJCQUFDLFdBQVc7MEVBWGQsT0FBTztzQkFBZixLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDSSxlQUFlO3NCQUF4QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBBZnRlclZpZXdJbml0LFxuICAgIENvbXBvbmVudCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgSW5qZWN0LFxuICAgIElucHV0LFxuICAgIE9uRGVzdHJveSxcbiAgICBPbkluaXQsXG4gICAgT3V0cHV0LFxuICAgIFBMQVRGT1JNX0lELFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGlzUGxhdGZvcm1TZXJ2ZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgZnJvbSwgbWVyZ2VNYXAsIFN1YmplY3QsIFN1YnNjcmlwdGlvbiwgdGFrZVVudGlsIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0c1BhcnRpY2xlcyB9IGZyb20gJ0B0c3BhcnRpY2xlcy9lbmdpbmUnO1xuaW1wb3J0IHR5cGUgeyBDb250YWluZXIsIEVuZ2luZSB9IGZyb20gJ0B0c3BhcnRpY2xlcy9lbmdpbmUnO1xuaW1wb3J0IHsgSVBhcnRpY2xlc1Byb3BzIH0gZnJvbSAnLi9uZy1wYXJ0aWNsZXMubW9kdWxlJztcbmltcG9ydCB7IE5nUGFydGljbGVzU2VydmljZSB9IGZyb20gJy4vbmctcGFydGljbGVzLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25neC1wYXJ0aWNsZXMnLFxuICAgIHRlbXBsYXRlOiAnPGRpdiBbaWRdPVwiaWRcIj48L2Rpdj4nLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hQYXJ0aWNsZXNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gICAgQElucHV0KCkgb3B0aW9ucz86IElQYXJ0aWNsZXNQcm9wcztcbiAgICBASW5wdXQoKSB1cmw/OiBzdHJpbmc7XG4gICAgQElucHV0KCkgaWQ6IHN0cmluZztcbiAgICBASW5wdXQoKSBwYXJ0aWNsZXNJbml0PzogKGVuZ2luZTogRW5naW5lKSA9PiBQcm9taXNlPHZvaWQ+O1xuICAgIEBPdXRwdXQoKSBwYXJ0aWNsZXNMb2FkZWQ6IEV2ZW50RW1pdHRlcjxDb250YWluZXI+ID0gbmV3IEV2ZW50RW1pdHRlcjxDb250YWluZXI+KCk7XG5cbiAgICBwcml2YXRlIHN1YnNjcmlwdGlvbj86IFN1YnNjcmlwdGlvbjtcbiAgICBwcml2YXRlIGRlc3Ryb3kkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgICBwcml2YXRlIGNvbnRhaW5lcj86IENvbnRhaW5lcjtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBASW5qZWN0KFBMQVRGT1JNX0lEKSBwcm90ZWN0ZWQgcGxhdGZvcm1JZDogc3RyaW5nLFxuICAgICAgICBwcml2YXRlIHJlYWRvbmx5IHBhcnRpY2xlc1NlcnZpY2U6IE5nUGFydGljbGVzU2VydmljZSxcbiAgICApIHtcbiAgICAgICAgdGhpcy5pZCA9ICd0c3BhcnRpY2xlcyc7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25Jbml0KCkge1xuICAgICAgICB0aGlzLnN1YnNjcmlwdGlvbiA9IHRoaXMucGFydGljbGVzU2VydmljZS5nZXRJbnN0YWxsYXRpb25TdGF0dXMoKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5jb250YWluZXI/LmRlc3Ryb3koKTtcbiAgICAgICAgICAgIHRoaXMubG9hZFBhcnRpY2xlcygpO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAoaXNQbGF0Zm9ybVNlcnZlcih0aGlzLnBsYXRmb3JtSWQpKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmxvYWRQYXJ0aWNsZXMoKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuY29udGFpbmVyPy5kZXN0cm95KCk7XG4gICAgICAgIHRoaXMuc3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICAgICAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGxvYWRQYXJ0aWNsZXMoKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IGNiID0gKGNvbnRhaW5lcj86IENvbnRhaW5lcikgPT4ge1xuICAgICAgICAgICAgdGhpcy5jb250YWluZXIgPSBjb250YWluZXI7XG4gICAgICAgICAgICB0aGlzLnBhcnRpY2xlc0xvYWRlZC5lbWl0KGNvbnRhaW5lcik7XG4gICAgICAgIH07XG5cbiAgICAgICAgZnJvbSh0aGlzLnBhcnRpY2xlc0luaXQgPyB0aGlzLnBhcnRpY2xlc0luaXQodHNQYXJ0aWNsZXMpIDogUHJvbWlzZS5yZXNvbHZlKCkpXG4gICAgICAgICAgICAucGlwZShcbiAgICAgICAgICAgICAgICBtZXJnZU1hcCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHJldHVybiB0c1BhcnRpY2xlcy5sb2FkKHsgaWQ6IHRoaXMuaWQsIHVybDogdGhpcy51cmwsIG9wdGlvbnM6IHRoaXMub3B0aW9ucyB9KTtcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICB0YWtlVW50aWwodGhpcy5kZXN0cm95JCksXG4gICAgICAgICAgICApXG4gICAgICAgICAgICAuc3Vic2NyaWJlKGNiKTtcbiAgICB9XG59XG4iXX0=