How to make confetti with ionic 6?

Ionic Framework Ionic Angular
1

I tryed to make confetti in Ionic 6 but it doesn’t work. I followed a tutorial that uses javascript to do this with the tsparticles module but it does not work.

My html file.

<ion-content>
     <div id="tsparticles"></div>
    <script type="text/javascript" src="../../assets/confetti.js"></script> 
</ion-content>

My javascript file.

tsParticles.load('tsparticles', { 
background: {
      color: {
        value: "#000000"
      }
    },
    fullScreen: {
      enable: true,
      zIndex: -1
    },
    interactivity: {
      detectsOn: "window"
    },
    emitters: {
      position: {
        x: 50,
        y: 100
      },
      life: {
        count: 1,
        duration: 5
      },
      rate: {
        quantity: 5,
        delay: 0.25
      }
    },
    particles: {
      color: {
        value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"]
      },
      move: {
        decay: 0.05,
        direction: "top",
        enable: true,
        gravity: {
          enable: true
        },
        outModes: {
          top: "none",
          default: "destroy"
        },
        speed: { min: 25, max: 50 }
      },
      number: {
        value: 0
      },
      opacity: {
        value: 1
      },
      rotate: {
        value: {
          min: 0,
          max: 360
        },
        direction: "random",
        animation: {
          enable: true,
          speed: 30
        }
      },
      tilt: {
        direction: "random",
        enable: true,
        value: {
          min: 0,
          max: 360
        },
        animation: {
          enable: true,
          speed: 30
        }
      },
      size: {
        value: 8
      },
      roll: {
        darken: {
          enable: true,
          value: 25
        },
        enable: true,
        speed: {
          min: 5,
          max: 15
        }
      },
      wobble: {
        distance: 30,
        enable: true,
        speed: {
          min: -7,
          max: 7
        }
      },
      shape: {
        type: [
          "circle",
          "square",
          "polygon",
          "character",
          "character",
          "character",
          "image",
          "image",
          "image"
        ],
        options: {
          image: [
            {
              src: "https://particles.js.org/images/fruits/apple.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/avocado.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/banana.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/berries.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/cherry.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/grapes.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/lemon.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/orange.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/peach.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/pear.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/pepper.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/plum.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/star.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/strawberry.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/watermelon.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            },
            {
              src: "https://particles.js.org/images/fruits/watermelon_slice.png",
              width: 32,
              height: 32,
              particles: {
                size: {
                  value: 16
                }
              }
            }
          ],
          polygon: [
            {
              sides: 5
            },
            {
              sides: 6
            }
          ],
          character: [
            {
              fill: true,
              font: "Verdana",
              value: ["💩", "🤡", "🍀", "🍙", "🦄", "⭐️"],
              style: "",
              weight: 400
            }
          ]
        }
      }
    }
});
2

you can’t use .js files there.
if you want to import .js files you must do it in your index.html files or using import in your .ts files or (if you are using angular), adding it to your scripts .json

"scripts": [
  .....
  "src/assets/js/custom.js"
]
3

thank you for your answer, I have moved on. Now it displays Uncaught ReferenceError: tsParticles is not defined at confetti.js:2:1 yet I installed the module by doing npm install tsparticles. I don’t know if you can use tsparticles with Ionic

4

Not sure if this will fix it for you but the .load() function returns a promise so you can use the play() function inside a .then(). This is what worked for me:

tsParticles.load('tsparticles', {
*my-settings*
})
.then(container => {
container.play();
});