Ionic and ng-particles

[matteobruni]

Hello,

I've seen your issue in the readme, I already talked with another dev about the resize issue and I created a sample project here: https://t.co/cFJwaUmvmF?amp=1

Shortly:

You need this in the component TypeScript file

    public particlesLoaded(container: Container): void {
        setTimeout(async () => {
            const canvas = container.canvas.element;
            if (!canvas) {
                console.log('no canvas');
                return;
            }

            const pxRatio = container.retina.pixelRatio;
            container.canvas.size.width = canvas.offsetWidth * pxRatio;
            container.canvas.size.height = canvas.offsetHeight * pxRatio;
            canvas.width = container.canvas.size.width;
            canvas.height = container.canvas.size.height;

            console.log(canvas);
            /* density particles enabled */
            container.densityAutoParticles();
            for (const [, plugin] of container.plugins) {
                if (plugin.resize !== undefined) {
                    plugin.resize();
                }
            }

            await container.refresh();
        }, 50); // 50ms seems good to wait for the canvas to be loaded inside the window, unnoticeable for the user
    }

And this in your html template

<Particles [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></Particles>

This simulate the resize event, if you have found a shorter way to simulate the resize event it will be fine too.

Probably with the next minor tsParticles release (1.18) will be fixed but it's a work in progress and I can't have a release date for now.

[ramith123]

Thank you! for this. I thought the error was my lack of experience in Angular. I will implement this as a solution since my one only works some of the time.